Vue.js : 'v-if' in child component throws not defined error

I have a child component that I am $emiting a v-on:blur event and a v-if condition if on:blur returns an error: <template> <input type="text" class="form-control" id="input-username" name="custid" v-on:blur="$emit('hasValidCustomerId')" v-model="custid"/>
<div v-if="custidError"> Error! </div> <template/>

And a Parent Component which has a slide show of child components.:

        <div id="password-form">
            <transition name: currentTransition>
                <component 
                       v-on:changeSlide="changeSlide" 
                       v-on:blur="hasValidCustomerId"  
                       :is="slides[currentSlide]">
                </component>
            </transition>
        </div>

Both click event and the on blur events I am emitting seem fine. But when it hits the v-if, I get an error

 VM17881 vue.js:491 [Vue warn]: Property or method "custidError" is not defined on the instance but referenced during render.

found in

---> <AccountDetails>
       <PasswordFlow>
         <Root>      

My javascript:

//////// child component
    var accountDetails =
      {
        template: '#template',
        components: { },
        data: function () {     
         return {};          
      },                      
        computed: {},
        methods: {},
      };    
//////// parent component
      var passwordFlow =
        {
        template: '#template',
        components: {
            "login": login,
            "account-details": accountDetails,
            "otc-options": otcOptions
        },
        data: function () {     
          return {
              slides: ['login', 'account-details', 'otc-options'],
              currentSlide: 0, 
              currentTransition: ' '
              custid: '',
              custidError: false //throws error not defined
             };     
          },             

        computed: {},
        methods: {
              hasValidCustomerId: function () {
              if (this.custid !== "" && !validation_customerid.test(this.custid)) {
              this.custidError = true;
           }
        },
      };

And my VUE instance:

   var vm = new Vue({
        el: "#login-main",
       data: {},
       components: {
           "passwordFlow": passwordFlow,
            },
       computed: {},
       mounted: function () { },
       methods: {}
   });

The error is saying the property in the v-if "custidError " is undefined. However it is defined in the parent. Am I supposed to emit the v-if statement?