title: VueJS trigger an event when a field is in focus
body: <p>I have a password change page with VueJS, and I want to view the password policy only when the user clicks into the new password field.
  The problem is that I can't find if the page is in focus..</p>
  
  <pre><code>&lt;b-row&gt;
    &lt;b-col&gt;
      &lt;b-form-group id="newPasswrd" label="New Password" :state="statePassword"&gt;
        &lt;b-input-group&gt;
          &lt;b-form-input id="newPassword" v-model="passwords.newPassword" ref="newPassword" placeholder="Passwort" type="password" maxlength="60" /&gt;
          &lt;p class="password-description"  &gt;Must be at least 8 characters and contain at least two of the following: Upper case, Lower case, special characters or numbers&lt;/p&gt;            
        &lt;/b-input-group&gt;
      &lt;/b-form-group&gt;
    &lt;/b-col&gt;
  &lt;/b-row&gt;
  </code></pre>
  
  <p>and this is what I have in the script part of the page for testing:</p>
  
  <pre><code>      if (this.$refs.newPassword.focus() == true) console.log("focus");
  </code></pre>
  
  <p>My plan is to ultimately put this line in a computed and attach a bool value to it to view/hide the text below the field depending on whether if it is in focus.
  What happens is that I get nothing in the console when I trigger the method where this condition is written, but the focus comes to the field instead, which is not what I want.
  what should I do to get a bool value if the field is in focus?</p>