title: Vue: How to call .focus() on button click
body: <p>I only started coding with <code>vue.js</code> yesterday, and I don't know how to "focus" on a textbox without using the "traditional" JS way, which is <code>document.getElementById('myTextBox').focus()</code>.</p>
  
  <p>Initially, my textbox is hidden. I have a "Start" button, and when the user clicks on it, the textbox is then displayed, and I want to set the <code>focus</code> there, so to speak. I already tried using <code>ref</code>, but to no avail (see code below).</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;input id="typeBox" ref="typeBox" placeholder="Type here..." /&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>export default {
    name: 'game',
  
    methods: {
      startTimer () {
        setTimeout(function () { /* .focus() won't work without this */
  
          /* ugly and not recommended */
          // document.getElementById('typeBox').focus()
  
          /* Throws the error: Cannot read property 'typeBox' of undefined */
          this.$refs.typeBox.focus()
  
          // ... any other options?
            // ...
  
        }, 1)
      }
    } /* END methods */
  
  } /* END export default */
  </code></pre>
  
  <p>Does anyone know how to do this? Please help.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Adding <code>autofocus</code> on <code>input</code> does the trick of focusing right after the page is loaded. But in my app, there is a need to "refocus" on the input field several times without reloading the page, that's why I need a way to call <code>.focus()</code>.</p>