title: How to validate child component using vue ant design?
body: <p>I have this component DynamicSelect (child compoenent) and I'm using it in an another component (parent) but when I try to validate my childe component, it deliver always the value as null so the validation is always false</p>
  
  <p>DynamicSelect Component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;a-select
      :showSearch="true"
      :placeholder=placeholder
      :value="selectedValue"
      @search="searchRegex($event)"
      @change="$emit('changed-item', setChangedItem($event))"
      @select="$emit('selected-item', setSelectedItem($event))"
      :filterOption="filterOption"
    &gt;
      &lt;a-select-option
        v-for="(item,idx) in dropdownData"
        :value="idx"
        :key="idx"
      &gt;{{item.text}}&lt;/a-select-option&gt;
    &lt;/a-select&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  
    export default {
      name: "DynamicSelect",
      data(){
        return{
            dropdownData: [],
            copyDropdownData:[],
            selectedValue: undefined
        }
      },
      props:{
        //Input data collection
        dataSrc:Array,
  
        //Placeholder for input field
        placeholder: String,
  
        //if true the dropdown will be automatically cleared after element selected
        resetAfterSelect: false,
  
        // List of id to filter the dropdown list
        lookFor:Array,
  
        // Data to display in the dropdown if not set,  lookFor list will be displayed
        displayedValues: Array,
  
        //Default Value
        defaultValues:String,
  
      },
      beforeMount(){
        this.checkDefaultVariable();
      },
      watch:{
        dataSrc:function(newVar,oldVar) { // watch it
          this.checkDefaultVariable()
        }
      },
      methods:{
        //Search for search term in the data collection 'lookFor' elements to set the dropdown list
        async searchRegex(term){
          if(term.length&gt;2) {
            let searchTerm = new RegExp(term.toUpperCase());
            this.dropdownData = await this.filterData(searchTerm);
            this.copyDropdownData = JSON.parse(JSON.stringify(this.dropdownData));
          }
          else
          {
            this.dropdownData = [];
            this.copyDropdownData = [];
          }
        },
  
        filterData(searchTerm){
          return this.dataSrc.filter(x =&gt; {
            let filtered= [];
            for (let i=0; i&lt;this.lookFor.length;i++){
              if(x[this.lookFor[i]])
              {
                if(searchTerm.test(x[this.lookFor[i]].toUpperCase()))
                {
                  let text = '';
                  if(this.displayedValues !== undefined)
                  {
                    for (let k=0; k&lt;this.displayedValues.length;k++)
                    {
                      text += x[this.displayedValues[k]];
                      if(k &lt; this.displayedValues.length-1)
                        text += ', '
                    }
                  }
                  else {
                    for (let k=0; k&lt;this.lookFor.length;k++)
                    {
                      text += x[this.lookFor[k]];
                      if(k &lt; this.lookFor.length-1)
                        text += ', '
                    }
                  }
                  x.text = text;
                  filtered.push(x);
                }
              }
            }
            return filtered.length&gt;0
          });
        },
  
        // just a logger
        logger(event){
          console.log(event);
        },
  
        async checkDefaultVariable(){
          if (this.defaultValues !== '' &amp;&amp; this.defaultValues !== undefined &amp;&amp; this.dataSrc.length&gt;0 ){
            // console.log('DATA',this.dataSrc);
            await this.searchRegex(this.defaultValues);
            let selected = await this.setSelectedItem(0);
            this.$emit('selected-item', selected)
          }
        },
  
        // return the selected Item as an Object
       setSelectedItem(id){
         // console.log('ON SELECT');
          let temp =  JSON.parse(JSON.stringify(this.dropdownData[id]));
           delete temp.text;
            if(this.resetAfterSelect)
            {
                this.dropdownData = [];
                this.selectedValue = undefined;
            }
            else {
              this.selectedValue = id;
            }
  
          return temp
        },
  
        setChangedItem(id){
          let temp =  JSON.parse(JSON.stringify(this.copyDropdownData[id]));
          delete temp.text;
          if(this.resetAfterSelect)
          {
            this.copyDropdownData = [];
            this.selectedValue = undefined;
          }
          else {
            this.selectedValue = id;
          }
          return temp
        },
  
        // search in the dropdown list
        filterOption(input, option) {
          let searchTerm = new RegExp(input.toUpperCase());
            if(searchTerm.test(this.dropdownData[option.key].text.toUpperCase()))
              return true;
            else {
              for(let i=0;i&lt;this.lookFor.length;i++){
                if(searchTerm.test(this.dropdownData[option.key][this.lookFor[i]].toUpperCase()))
                  return true;
                else if(i &gt;= this.lookFor.length)
                  return false;
              }
            }
        }
      }
    }
  &lt;/script&gt;
  
  </code></pre>
  
  <p>parent component:</p>
  
  <pre><code>&lt;template&gt;
  
  &lt;dynamic-select
                        :dataSrc="users"
                        placeholder="Lastname, Firstname"
                        @selected-item="onSelectUser($event)"
                        @changed-item="onSelectUser($event)"
                        :lookFor="['lastname','firstname']"
                        v-decorator="['contact', {valuePropName:'selectedValue', 
                        rules: [{ required: true, 
                                  validator: userExists, 
                                   message: 'Error'}]}]"
                &gt;
  &lt;/dynamic-select&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  .
  .
  .
  methods: {
  
  userExists(rule, value, callback) {
          console.log('VALUE', value); //always undefined
          console.log('RULES',rule);
          console.log('CALLBACK',callback)
          return value !== null &amp;&amp; value !== undefined &amp;&amp; value.length &gt; 2;
        },
  
  
  
  onSelectUser(user) {
          console.log("user: " , user); // set with the selected value
         }
  },
  .
  .
  .
  &lt;/script&gt;
  </code></pre>
  
  <p>I expect that the child component returns the selected value like when emitting an event, I also tried with models but it hasn't helped
  thanks :)</p>