title: v-checkboxes are true when the page is loaded
body: <p>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:</p>
  
  <pre><code>&lt;template&gt;
  &lt;v-dialog persistent max-width="75%" v-model="dialog"&gt;
      &lt;v-btn round color="secondary" slot="activator"&gt;New Enquiry&lt;/v-btn&gt;
      &lt;v-card&gt;
  
          &lt;v-card-text&gt;
              &lt;v-form ref="enquiryForm"&gt;
                  &lt;v-container fluid grid-list-lg&gt;
                      &lt;v-layout row wrap&gt;
  
                          &lt;v-flex xs6&gt;
                              &lt;span class="title"&gt;Prefrences&lt;/span&gt;
                              &lt;v-layout row wrap&gt;
                                  &lt;v-flex xs6&gt;
  
                                      &lt;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()"
                                      &gt;&lt;/v-checkbox&gt;
  
                                  &lt;/v-flex&gt;
  
                              &lt;/v-layout&gt;
                          &lt;/v-flex&gt;
  
                      &lt;/v-layout&gt;
                  &lt;/v-container&gt;
              &lt;/v-form&gt;
          &lt;/v-card-text&gt;
          &lt;v-card-actions&gt;
              &lt;v-spacer&gt;&lt;/v-spacer&gt;
              &lt;v-btn flat lg color="secondary" @click="close"&gt;Cancel&lt;/v-btn&gt;
              &lt;v-btn flat lg color="secondary" @click="submit"&gt;Submit&lt;/v-btn&gt;
          &lt;/v-card-actions&gt;
      &lt;/v-card&gt;
  &lt;/v-dialog&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script&gt;
  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 ) =&gt; {
              this.close();
          } )
          .catch( ( err ) =&gt; {
              console.log( err );
          } )
      },
      close ( ) {
          this.clearForm();
          this.dialog = false;
      }
  }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I tried:</p>
  
  <pre><code>:success="!!enquiryForm.preferences &amp;&amp; !$invalid"                                
  :success-messages="(!!enquiryForm.preferences &amp;&amp; !$invalid) ? 'Ok' : ''"
  </code></pre>
  
  <p>and</p>
  
  <pre><code>:success="!!enquiryForm.preferences &amp;&amp; !$v.$invalid"
  :success-messages="(!!enquiryForm.preferences &amp;&amp; !$v.$invalid) ? 'Ok' : ''"
  </code></pre>
  
  <p>but that did not help.</p>