title: vuejs: Trying to focus the input using v-el directive
body: <p>I am creating a wizard login form where the Mobile Number is first entered and 
  password is entered next.</p>
  
  <p>Here am trying to focus the password input using</p>
  
  <pre><code>this.$$.passwordInput.focus()
  </code></pre>
  
  <p>however if am getting the error given below</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'focus' of undefined
  </code></pre>
  
  <p>The full code is below</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;div id="login"&gt;
    &lt;div v-if="flow.mobile"&gt;
      &lt;form v-on="submit: checkmobile"&gt;
          &lt;p&gt;
            Mobile Number&lt;br&gt;
            &lt;input type="text" v-model="mobile_number" v-el="mobileNumber"&gt;
          &lt;/p&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div v-if="flow.password"&gt;
      &lt;form v-on="submit: checkpassword"&gt;
          &lt;p&gt;
            Password&lt;br&gt;
            &lt;input type="password" v-model="password" v-el="passwordInput"&gt;
          &lt;/p&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>script.js</p>
  
  <pre><code>var demo = new Vue({
  el: '#login',
  data: {
      flow: {
          mobile: true,
          password: false
      }
  },
  methods: {
      checkmobile: function(e) {
          e.preventDefault();
          this.flow.mobile = false;
          this.flow.password = true;
          this.$$.passwordInput.focus();
      },
      checkpassword: function(e) {
          e.preventDefault();
      }
  }
  </code></pre>
  
  <p>});</p>