title: How to set focus on textarea which is rendered inside v-for in Vuejs 2?
body: <p>In my Vue.js component, I rendered table rows containing <code>textarea</code> based on a list of items as following:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div&gt;
         &lt;table&gt;
             &lt;tr v-for=&quot;(item, index) in items&quot;&gt;
                 &lt;td&gt;{{ index }}&lt;/td&gt;
                 &lt;td&gt;&lt;textarea v-model=&quot;item.message&quot;&gt;&lt;/textarea&gt;&lt;/td&gt;
             &lt;/tr&gt;
         &lt;/table&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          data: {
              items: [
                 { message: 'Foo' },
                 { message: 'Bar' }
              ]
          }
      };
  &lt;/script&gt;
  </code></pre>
  <p>When I click anywhere in a row, I want the <code>textarea</code> inside that row to be focused. How can I do that?</p>
  <p>The following code cannot solve the problem:</p>
  <pre><code> this.$refs.myTextArea.focus();
  </code></pre>
  <p>This only works with element with unique ref <code>id</code> and outside of <code>v-for</code>.</p>