Not able to validate groups in form-generator

[arunjoseph]

<template>
    <div>
        <div class="panel panel-default">
            <div class="panel-heading">Telecoms Questionnaire Form</div>
            <div class="panel-body">
                <form-wizard @on-complete="onComplete"
                             color="gray"
                             error-color="#a94442">
                    <h2 slot="title">Telecom Survey</h2>
                    <tab-content title="Company details"
                                 icon="fa fa-user" :before-change="validateCompanyTab">
                        <h2>QUESTIONNAIRE TO BE FILLED BY ONLY AIRTEL/BSNL USERS’</h2>
                        <p>I hereby undertake that the information collected through this questionnaire will be kept
                            confidential and will be used for research purpose only.</p>
                        <vue-form-generator :model=model
                                            :schema="companyTabSchema"
                                            :options="formOptions"
                                            ref="companyTabForm">
                        </vue-form-generator>
                    </tab-content>
                    <tab-content title="Demographic Profile"
                                 icon="fa fa-user" :before-change="validateDemographicTab">
                        <vue-form-generator :model=model
                                            :schema="demographicTabSchema"
                                            :options="formOptions"
                                            ref="demographicTabForm">
                        </vue-form-generator>
                    </tab-content>
                    <tab-content title="SERVICE QUALITY AND CUSTOMER SATISFACTION"
                                 icon="fa fa-user" :before-change="validateServiceQualityTab">
                        <h3>Please indicate the level of service quality of your telecom service provider and also
                            indicate your level of satisfaction towards the service quality of your telecom service
                            provider.</h3>
                        <vue-form-generator :model=model
                                            :schema="serviceQualityTabSchema"
                                            :options="formOptions"
                                            ref="serviceQualityTabForm">
                        </vue-form-generator>
                    </tab-content>
                    <tab-content title="CORPORATE SOCIAL RESPONSIBILITY"
                                 icon="fa fa-user" :before-change="validateCSRTab">
                        <vue-form-generator :model=model
                                            :schema="CSRTabSchema"
                                            :options="formOptions"
                                            ref="CSRTabForm">
                        </vue-form-generator>
                    </tab-content>
                </form-wizard>
            </div>
        </div>
    </div>
</template>
<script>
    import VueFormWizard from 'vue-form-wizard';
    import VueFormGenerator from 'vue-form-generator';
    export default {
        data() {
            return {
                model: {
                    serviceProvider: '',
                    serviceCity: '',
                    demographic: {
                        age: '',
                        gender: '',
                        qualification: '',
                        professional: {
                            occupation: '',
                            annual_income: '',
                        },
                        telecom: {
                            tenure: '',
                            services: []
                        }
                    },
                    serviceQuality: {
                        network_coverage_importance: '',
                        network_coverage_satisfaction: '',
                        network_speed_importance: '',
                        network_speed_satisfaction: '',
                        network_quality_importance: '',
                        network_quality_satisfaction: '',
                        availability_of_service_centers_importance: '',
                        availability_of_service_centers_satisfaction: '',
                        customer_care_services_importance: '',
                        customer_care_services_satisfaction: '',
                        helpful_nature_importance: '',
                        helpful_nature_satisfaction: '',
                        technical_skills_importance: '',
                        technical_skills_satisfaction: '',
                        effective_communication_channel_importance: '',
                        effective_communication_channel_satisfaction: '',
                        behavior_importance: '',
                        behavior_satisfaction: '',
                        attention_importance: '',
                        attention_satisfaction: '',
                        call_charges_importance: '',
                        call_charges_satisfaction: '',
                        internet_charges_importance: '',
                        internet_charges_satisfaction: '',
                        rental_charges_importance: '',
                        rental_charges_satisfaction: '',
                        roaming_charges_importance: '',
                        roaming_charges_satisfaction: '',
                        transparency_importance: '',
                        transparency_satisfaction: '',
                        error_free_bills_importance: '',
                        error_free_bills_satisfaction: '',
                        timely_communication_importance: '',
                        timely_communication_satisfaction: '',
                        payment_options_importance: '',
                        payment_options_satisfaction: '',
                        safety_in_payment_transaction_importance: '',
                        safety_in_payment_transaction_satisfaction: '',
                        mechanism_of_filing_complaint_importance: '',
                        mechanism_of_filing_complaint_satisfaction: '',
                        time_frame_to_solve_the_complaint_importance: '',
                        time_frame_to_solve_the_complaint_satisfaction: '',
                        complaint_handling_system_importance: '',
                        complaint_handling_system_satisfaction: '',
                        service_to_customers_importance: '',
                        service_to_customers_satisfaction: '',
                        response_to_customer_requests_importance: '',
                        response_to_customer_requests_satisfaction: ''
                    },
                    csr: {
                        electronic_bill: '',
                        social_awareness_campaigns: '',
                        ethical_practices: '',
                        emergency_talk_time: '',
                        special_applications: '',
                        green_advertising: '',
                        recycle: '',
                        health_of_the_people: ''
                    }
                },
                formOptions: {
                    validationErrorClass: "has-error",
                    validationSuccessClass: "has-success",
                    validateAfterChanged: true,
                    validateAfterLoad: false
                },
                companyTabSchema: {
                    fields: [
                        {
                            type: "select",
                            inputType: "text",
                            label: "Name of the service provider",
                            model: "serviceProvider",
                            required: true,
                            validator: VueFormGenerator.validators.string,
                            values: ['Airtel', 'BSNL'],
                        },
                        {
                            type: "input",
                            inputType: "text",
                            label: "Name of the city",
                            model: "lastName",
                            required: true,
                            validator: VueFormGenerator.validators.string
                        }
                    ]
                },
                demographicTabSchema: {
                    fields: [
                        {
                            type: "radios",
                            label: "Age",
                            model: "demographic.age",
                            required: true,
                            validator: VueFormGenerator.validators.string,
                            values: ['Less than 25', '25-35', '35-45', '45-60', '60 & above']
                        },
                        {
                            type: "radios",
                            label: "Gender",
                            model: "demographic.gender",
                            required: true,
                            validator: VueFormGenerator.validators.string,
                            values: ['Male', 'Female']
                        },
                        {
                            type: "radios",
                            label: "Educational Qualification",
                            model: "demographic.qualification",
                            required: true,
                            validator: VueFormGenerator.validators.string,
                            values: ['Below Secondary', 'Secondary', 'Graduate', 'Post Graduate']
                        },
                        {
                            type: "radios",
                            label: "Occupation",
                            model: "demographic.professional.occupation",
                            required: true,
                            validator: VueFormGenerator.validators.string,
                            values: ['Service', 'Business', 'Professional', 'Others']
                        },
                        {
                            type: "radios",
                            label: "Annual Income (In Rupees)",
                            model: "demographic.professional.annual_income",
                            required: true,
                            validator: VueFormGenerator.validators.string,
                            values: ['Less than 1Lakh', '1Lakh-3Lakh', '3Lakh-5Lakh', '5Lakh-10Lakh']
                        },
                        {
                            type: "radios",
                            label: "How long you are using the services of this telecom company?",
                            model: "demographic.telecom.tenure",
                            required: true,
                            validator: VueFormGenerator.validators.string,
                            values: ['Last one year', 'One to three years', 'Three to five years', 'More than five years']
                        },
                        {
                            type: "checklist",
                            label: "What types of services are you using of this telecom company? (You can tick more than one option)",
                            model: "demographic.telecom.services",
                            required: true,
                            listBox: true,
                            validator: VueFormGenerator.validators.array,
                            values: ['Prepaid mobile services', 'Postpaid mobile services', 'Wi-Fi/Broadband', 'Landline services']
                        }
                    ]
                },
                serviceQualityTabSchema: {
                    groups: [
                        {
                            "legend": "Network Coverage",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Network Coverage?",
                                    model: "serviceQuality.network_coverage_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Network Coverage",
                                    model: "serviceQuality.network_coverage_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Network Speed",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Network Speed?",
                                    model: "serviceQuality.network_speed_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Network Speed",
                                    model: "serviceQuality.network_speed_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Network Quality",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Network Quality?",
                                    model: "serviceQuality.network_quality_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Network Quality",
                                    model: "serviceQuality.network_quality_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Availability of service centers",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Availability of service centers?",
                                    model: "serviceQuality.availability_of_service_centers_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Availability of service centers",
                                    model: "serviceQuality.availability_of_service_centers_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Customer care services",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Customer care services?",
                                    model: "serviceQuality.customer_care_services_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Customer care services",
                                    model: "serviceQuality.customer_care_services_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Helpful nature of employees",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Helpful nature of employees?",
                                    model: "serviceQuality.helpful_nature_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Helpful nature of employees",
                                    model: "serviceQuality.helpful_nature_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Knowledge and technical skills of employees",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Knowledge and technical skills of employees?",
                                    model: "serviceQuality.technical_skills_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Knowledge and technical skills of employees",
                                    model: "serviceQuality.technical_skills_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Effective communication channel",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Effective communication channel?",
                                    model: "serviceQuality.effective_communication_channel_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Effective communication channel",
                                    model: "serviceQuality.effective_communication_channel_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Courteous behavior of employees on the Telephonic discussion",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Courteous behavior of employees on the Telephonic discussion?",
                                    model: "serviceQuality.behavior_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Courteous behavior of employees on the Telephonic discussion",
                                    model: "serviceQuality.behavior_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Individual Attention to the customers",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Individual Attention to the customers?",
                                    model: "serviceQuality.attention_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Individual Attention to the customers",
                                    model: "serviceQuality.attention_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Call charges",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Call charges?",
                                    model: "serviceQuality.call_charges_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Call charges",
                                    model: "serviceQuality.call_charges_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Internet charges",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Internet charges?",
                                    model: "serviceQuality.internet_charges_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Internet charges",
                                    model: "serviceQuality.internet_charges_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Rental charges",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Rental charges?",
                                    model: "serviceQuality.rental_charges_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Rental charges",
                                    model: "serviceQuality.rental_charges_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Roaming charges",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Roaming charges?",
                                    model: "serviceQuality.roaming_charges_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Roaming charges",
                                    model: "serviceQuality.roaming_charges_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Transparency in bill",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Transparency in bill?",
                                    model: "serviceQuality.transparency_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Transparency in bill",
                                    model: "serviceQuality.transparency_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Error free bills",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Error free bills?",
                                    model: "serviceQuality.error_free_bills_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Error free bills",
                                    model: "serviceQuality.error_free_bills_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Timely communication of bill",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Timely communication of bill?",
                                    model: "serviceQuality.timely_communication_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Timely communication of bill",
                                    model: "serviceQuality.timely_communication_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Variety of Payment options (debit card, credit card or cash, net  banking, wallet etc )",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Variety of Payment options (debit card, credit card or cash, net  banking, wallet etc )?",
                                    model: "serviceQuality.payment_options_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Variety of Payment options (debit card, credit card or cash, net  banking, wallet etc )",
                                    model: "serviceQuality.payment_options_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Safety in payment transaction through online mode",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Safety in payment transaction through online mode?",
                                    model: "serviceQuality.safety_in_payment_transaction_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Safety in payment transaction through online mode",
                                    model: "serviceQuality.safety_in_payment_transaction_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Easy mechanism of filing complaint",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Easy mechanism of filing complaint?",
                                    model: "serviceQuality.mechanism_of_filing_complaint_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Easy mechanism of filing complaint",
                                    model: "serviceQuality.mechanism_of_filing_complaint_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Time frame to solve the complaint",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Time frame to solve the complaint?",
                                    model: "serviceQuality.time_frame_to_solve_the_complaint_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Time frame to solve the complaint",
                                    model: "serviceQuality.time_frame_to_solve_the_complaint_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Transparency in complaint handling system",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Transparency in complaint handling system?",
                                    model: "serviceQuality.complaint_handling_system_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Transparency in complaint handling system",
                                    model: "serviceQuality.complaint_handling_system_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Prompt service to customers",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Prompt service to customers?",
                                    model: "serviceQuality.service_to_customers_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Prompt service to customers",
                                    model: "serviceQuality.service_to_customers_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "legend": "Timely response to customer\u2019s requests",
                            "fields": [
                                {
                                    type: "radios",
                                    label: "How would you rate the importance of Timely response to customer\u2019s requests?",
                                    model: "serviceQuality.response_to_customer_requests_importance",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Not at all Important",
                                            "value": 1
                                        },
                                        {
                                            "name": "Of Little Importance",
                                            "value": 2
                                        },
                                        {
                                            "name": "Of Average Importance",
                                            "value": 3
                                        },
                                        {
                                            "name": "Very Important",
                                            "value": 4
                                        },
                                        {
                                            "name": "Absolutely Essential",
                                            "value": 5
                                        }
                                    ]
                                },
                                {
                                    type: "radios",
                                    label: "Please specify your level of satisfaction towards Timely response to customer\u2019s requests",
                                    model: "serviceQuality.response_to_customer_requests_satisfaction",
                                    required: true,
                                    validators: VueFormGenerator.validators.integer,
                                    values: [
                                        {
                                            "name": "Very dissatisfied",
                                            "value": 1
                                        },
                                        {
                                            "name": "Dissatisfied",
                                            "value": 2
                                        },
                                        {
                                            "name": "Neutral",
                                            "value": 3
                                        },
                                        {
                                            "name": "Satisfied",
                                            "value": 4
                                        },
                                        {
                                            "name": "Very satisfied",
                                            "value": 5
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                CSRTabSchema: {
                    fields: [
                        {
                            type: "radios",
                            label: "Company make use of e-bill to save papers",
                            model: "csr.electronic_bill",
                            required: true,
                            validator: VueFormGenerator.validators.integer,
                            values: [
                                {
                                    "name": "Strongly Disagree",
                                    "value": 1
                                },
                                {
                                    "name": "Disagree",
                                    "value": 2
                                },
                                {
                                    "name": "Neutral",
                                    "value": 3
                                },
                                {
                                    "name": "Agree",
                                    "value": 4
                                },
                                {
                                    "name": "Strongly Agree",
                                    "value": 5
                                }
                            ]
                        },
                        {
                            type: "radios",
                            label: "Company sponsor the social awareness campaigns",
                            model: "csr.social_awareness_campaigns",
                            required: true,
                            validator: VueFormGenerator.validators.integer,
                            values: [
                                {
                                    "name": "Strongly Disagree",
                                    "value": 1
                                },
                                {
                                    "name": "Disagree",
                                    "value": 2
                                },
                                {
                                    "name": "Neutral",
                                    "value": 3
                                },
                                {
                                    "name": "Agree",
                                    "value": 4
                                },
                                {
                                    "name": "Strongly Agree",
                                    "value": 5
                                }
                            ]
                        },
                        {
                            type: "radios",
                            label: "Company follows the ethical practices and follows the laws",
                            model: "csr.ethical_practices",
                            required: true,
                            validator: VueFormGenerator.validators.integer,
                            values: [
                                {
                                    "name": "Strongly Disagree",
                                    "value": 1
                                },
                                {
                                    "name": "Disagree",
                                    "value": 2
                                },
                                {
                                    "name": "Neutral",
                                    "value": 3
                                },
                                {
                                    "name": "Agree",
                                    "value": 4
                                },
                                {
                                    "name": "Strongly Agree",
                                    "value": 5
                                }
                            ]
                        },
                        {
                            type: "radios",
                            label: "Company has a provision for emergency talk time facility to prepaid users",
                            model: "csr.emergency_talk_time",
                            required: true,
                            validator: VueFormGenerator.validators.integer,
                            values: [
                                {
                                    "name": "Strongly Disagree",
                                    "value": 1
                                },
                                {
                                    "name": "Disagree",
                                    "value": 2
                                },
                                {
                                    "name": "Neutral",
                                    "value": 3
                                },
                                {
                                    "name": "Agree",
                                    "value": 4
                                },
                                {
                                    "name": "Strongly Agree",
                                    "value": 5
                                }
                            ]
                        },
                        {
                            type: "radios",
                            label: "Special applications for the safety of women",
                            model: "csr.special_applications",
                            required: true,
                            validator: VueFormGenerator.validators.integer,
                            values: [
                                {
                                    "name": "Strongly Disagree",
                                    "value": 1
                                },
                                {
                                    "name": "Disagree",
                                    "value": 2
                                },
                                {
                                    "name": "Neutral",
                                    "value": 3
                                },
                                {
                                    "name": "Agree",
                                    "value": 4
                                },
                                {
                                    "name": "Strongly Agree",
                                    "value": 5
                                }
                            ]
                        },
                        {
                            type: "radios",
                            label: "Company make use of green advertising",
                            model: "csr.green_advertising",
                            required: true,
                            validator: VueFormGenerator.validators.integer,
                            values: [
                                {
                                    "name": "Strongly Disagree",
                                    "value": 1
                                },
                                {
                                    "name": "Disagree",
                                    "value": 2
                                },
                                {
                                    "name": "Neutral",
                                    "value": 3
                                },
                                {
                                    "name": "Agree",
                                    "value": 4
                                },
                                {
                                    "name": "Strongly Agree",
                                    "value": 5
                                }
                            ]
                        },
                        {
                            type: "radios",
                            label: "The products of the company can be recycle",
                            model: "csr.recycle",
                            required: true,
                            validator: VueFormGenerator.validators.integer,
                            values: [
                                {
                                    "name": "Strongly Disagree",
                                    "value": 1
                                },
                                {
                                    "name": "Disagree",
                                    "value": 2
                                },
                                {
                                    "name": "Neutral",
                                    "value": 3
                                },
                                {
                                    "name": "Agree",
                                    "value": 4
                                },
                                {
                                    "name": "Strongly Agree",
                                    "value": 5
                                }
                            ]
                        },
                        {
                            type: "radios",
                            label: "The product of the company causes no harm to the health of the people",
                            model: "csr.health_of_the_people",
                            required: true,
                            validator: VueFormGenerator.validators.integer,
                            values: [
                                {
                                    "name": "Strongly Disagree",
                                    "value": 1
                                },
                                {
                                    "name": "Disagree",
                                    "value": 2
                                },
                                {
                                    "name": "Neutral",
                                    "value": 3
                                },
                                {
                                    "name": "Agree",
                                    "value": 4
                                },
                                {
                                    "name": "Strongly Agree",
                                    "value": 5
                                }
                            ]
                        }
                    ]
                }
            }
        },
        methods: {
            onComplete: function () {
                let url = `${window.surveyMain.baseUrl}/register`;
                axios.post(url, this.model, function (data) {
                    console.log(data);
                });
            },
            validateCompanyTab: function () {
                return this.$refs.companyTabForm.validate();
            },
            validateDemographicTab: function () {
                return this.$refs.demographicTabForm.validate();
            },
            validateServiceQualityTab: function () {
                return this.$refs.serviceQualityTabForm.validate();
            },
            validateCSRTab: function () {
                return this.$refs.CSRTabForm.validate();
            }
        }
    }
</script>

I have the above component but when I try to validate the group of validateServiceQualityTab it doesn't work and also needed suggestion on how can I distribute them to small components for every tab

[icebob]

Please create a reproduceable fiddle.

[arunjoseph]

http://jsfiddle.net/ckjuppo1/4/

[zoul0813]

@arunjoseph the problem is that the tab is using validators: VueFormGenerator.validators.integer ... all the other tabs use the correct validator: VueFormGenerator.validators.integer property.