vuejs2 - Passing validation data in Vue.js to slot -

i have started using vue.js , want use vee-validator plugin don't have re-invent wheel. whether use vee-validator or not sure vue wizards out there know how deal situation.

to keep code clean update 1 place update everywhere idea stands true trying make custom components nicely styled , wrapped html inputs.

in simple example have 1 textinput idea follow same format have other types of inputs, textareas, selects etc.

i have been trying work sample vee-validate sample not clear , not trying do. http://vee-validate.logaretm.com/examples.html#component-example

so main app this:

<template>     <div class="row">         <div class="col-md-10 col-md-offset-1">             <div class="panel panel-default">                 <div class="panel-heading">                     <h3 class="panel-title pull-left">new post</h3>                 </div>                 <div class="panel-body">                      <inputwrapper label="my label" icon="fa-user">                         <textinput name="test" placeholder="edit me"></textinput>                     </inputwrapper>                  </div>             </div>         </div>     </div> </template>  <script>     export default {         data(){             return {             }         } </script> 

then have inputwrapper.vue file:

<template>     <div class="form-group" v-bind:class="{ 'has-error': errors.has('email') }">         <div class="col-md-12">             <label>{{ label }}</label>             <div class="input-group">                 <span class="input-group-addon" v-if="icon"><i class="fa fa-lg " v-bind:class="icon"></i></span>                 <slot></slot> <!-- input element passed parent -->             </div>             <small class="help-block" v-show="errors.has('email')">                 <strong>{{ errors.first('email') }}</strong>             </small>         </div>     </div> </template>  <script>     export default {         props: ['label', 'icon'],          data(){             return {             }         }     } </script> 

and textinput.vue:

<template>     <input          v-bind:id="name"         v-bind:name="name"         v-bind:placeholder="placeholder"          v-on:keyup="oninput"          class="form-control" /> </template>  <script>     export default {         props: ['name', 'placeholder', 'type'],          data(){             return {             }         },          methods: {             oninput(e) {                 const value = e.target.value;                 this.$emit('input', value);             }         }     } </script> 

i have been tinkering oninput() method in textinput.vue not sure should doing.

notice inputwrapper.vue file has 'errors' errorbag not displaying errors. presume because errors.has() , errors.first() not exist in same component being validated.

how can inputwrapper show errors comming custom textinput component?

i have added v-validate="'required|email'" custom component call in main app no luck , tried in textinput.vue file no luck. , unfortunately docs on vee-validator dont adiquitly describe data-vv-value-path is, don't know should putting in there value.

i think text input name prop should 'email' instead of 'test':

    <textinput name="email" placeholder="edit me"></textinput> 

because that's error you're looking in inputwrapper.vue:

    <div class="form-group" v-bind:class="{ 'has-error': errors.has('email') }"> 

as documentation says

the plugin augments vue instance private validator object , public errors data object.

the same object should accessible across components.