title: Vuetify apply rules validation to a custom component
body: <p>I'd like to use <a href="https://vuetifyjs.com/en/components/text-fields#custom-validation" rel="nofollow noreferrer">Vuetify custom validation</a> on a custom component. </p>
  
  <p>E.g I created a date time picker component </p>
  
  <p><strong>DateTimePicker.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;v-menu v-model="menu" :close-on-content-click="false" full-width max-width="290" transition="scale-transition"&gt;
      &lt;!-- Text field --&gt;
      &lt;v-text-field slot="activator" :label="label" append-icon="date_range" solo
                    :value="formattedDate" readonly&gt;&lt;/v-text-field&gt;
  
      &lt;!-- Date picker --&gt;
      &lt;v-date-picker v-model="selectedDate" locale="fr-fr" v-if="datePicker" :min="minDate"&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;v-btn flat color="primary" @click="menu = false"&gt;{{ $t('cancel') }}&lt;/v-btn&gt;
        &lt;v-btn flat color="primary" @click="chooseDate"&gt;{{ $t('ok') }}&lt;/v-btn&gt;
      &lt;/v-date-picker&gt;
  
      &lt;!-- Time picker --&gt;
      &lt;v-time-picker v-if="!datePicker" v-model="selectedTime" format="24hr" :min="minTime" :allowed-minutes="allowedStep"&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;v-btn flat color="primary" @click="menu = false"&gt;{{ $t('cancel') }}&lt;/v-btn&gt;
        &lt;v-btn flat color="primary" @click="chooseTime"&gt;{{ $t('ok') }}&lt;/v-btn&gt;
      &lt;/v-time-picker&gt;
    &lt;/v-menu&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>And I want to apply rules validation on my custom component in my parent component. </p>
  
  <p><strong>Parent.vue</strong></p>
  
  <pre><code>   &lt;v-container fluid grid-list-xl&gt;
        &lt;v-layout row wrap class="pt-4"&gt;
          &lt;v-flex xs12 md3&gt;
            &lt;v-autocomplete ref="city" v-model="city" :items="locations" item-text="description" :label="$t('stores')" solo
                            :rules="[rules.required]"&gt;&lt;/v-autocomplete&gt;
          &lt;/v-flex&gt;
  
          &lt;!-- Start date picker --&gt;
          &lt;v-flex xs12 md3&gt;
            &lt;date-time-picker ref="startDate" v-model="startDate" :label="$t('start_date')" :rules="[rules.required]"&gt;&lt;/date-time-picker&gt;
          &lt;/v-flex&gt;
  
          &lt;!-- End date picker --&gt;
          &lt;v-flex xs12 md3&gt;
            &lt;date-time-picker v-model="endDate" :label="$t('end_date')"&gt;&lt;/date-time-picker&gt;
          &lt;/v-flex&gt;
  
          &lt;v-flex xs12 md3&gt;
            &lt;v-btn class="primary btn-bigger" @click="valdiate" block&gt; {{ $t('search') }}&lt;/v-btn&gt;
          &lt;/v-flex&gt;
  
        &lt;/v-layout&gt;
      &lt;/v-container&gt;
  </code></pre>
  
  <p>I'd like to do the same thing as I did for my <code>v-autocomplete</code>. I tried to use rules props on my <code>&lt;date-time-picker&gt;</code> and use it on my <code>&lt;v-text-field&gt;</code> inside my custom component but it doesn't work I got this error :</p>
  
  <p><code>_this2.$refs[f].validate is not a function</code></p>
  
  <p>I took the same code as the <a href="https://vuetifyjs.com/en/components/text-fields#custom-validation" rel="nofollow noreferrer">documentation</a> so it works for my <code>&lt;v-autocomplete&gt;</code> but I don't know how can I do for my custom component.</p>