v-checkboxes are true when the page is loaded - vue.js

Question

I am doing form validation in vuelidate. I have a group of checkboxes. There are other fields also in the form. I want to show the success-messages of the checkbox only when a checkbox is checked. But the success-messages are showing when the page loads even when the checkboxes are not checked. What is wrong with my code. Here is my code:
<template>
<v-dialog persistent max-width="75%" v-model="dialog">
<v-btn round color="secondary" slot="activator">New Enquiry</v-btn>
<v-card>
<v-card-text>
<v-form ref="enquiryForm">
<v-container fluid grid-list-lg>
<v-layout row wrap>
<v-flex xs6>
<span class="title">Prefrences</span>
<v-layout row wrap>
<v-flex xs6>
<v-checkbox
v-for="( value, index ) in preferencesData"
:key="index"
v-model="enquiryForm.preferences"
:label="value"
:value="index"
required
:success="!!enquiryForm.preferences"
:success-messages="(!!enquiryForm.preferences) ? 'Ok' : ''"
:error-messages="fieldErrors('enquiryForm.preferences')"
#change="$v.enquiryForm.preferences.$touch()"
#blur="$v.enquiryForm.preferences.$touch()"
></v-checkbox>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat lg color="secondary" #click="close">Cancel</v-btn>
<v-btn flat lg color="secondary" #click="submit">Submit</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<script>
import { mapGetters } from 'vuex';
import validationMixin from '#/mixins/validationMixin';
import { required } from 'vuelidate/lib/validators'
import moment from 'moment';
const defaultFormData = {
date: moment().format(),
preferences: []
}
export default {
mixins: [ validationMixin ],
validations: {
enquiryForm: {
preferences: { required }
}
},
validationMessages: {
enquiryForm: {
preferences: {
required: 'Please select at least one.'
}
}
},
data ( ) {
return {
dialog: false,
enquiryForm: Object.assign({}, defaultFormData),
preferencesData: [
'Furnished',
'SemiFurnished',
'UnFurnished'
]
}
},
computed: {
...mapGetters({
projects: 'projects',
cpexecutives: 'cpexecutives'
})
},
mounted ( ) {
this.$store.dispatch('fetchProjects');
this.$store.dispatch('getUsers');
this.clearForm();
},
methods: {
clearForm ( ) {
this.$v.$reset();
this.enquiryForm = Object.assign({}, defaultFormData);
},
submit ( ) {
this.$v.$touch()
this.$store.dispatch('addEnquiry', {
date: moment().format(),
preferences: this.enquiryForm.preferences
})
.then( ( result ) => {
this.close();
} )
.catch( ( err ) => {
console.log( err );
} )
},
close ( ) {
this.clearForm();
this.dialog = false;
}
}
}
</script>
I tried:
:success="!!enquiryForm.preferences && !$invalid"
:success-messages="(!!enquiryForm.preferences && !$invalid) ? 'Ok' : ''"
and
:success="!!enquiryForm.preferences && !$v.$invalid"
:success-messages="(!!enquiryForm.preferences && !$v.$invalid) ? 'Ok' : ''"
but that did not help.

Answer 1

I managed to do it
:success="!!enquiryForm.preferences && !$v.enquiryForm.preferences.$invalid"
:success-messages="(!!enquiryForm.preferences && !$v.enquiryForm.preferences.$invalid) ? 'Ok' : ''"
But, I want to show the success message 'Ok' and error message only once below the checkboxes. How do I do it?