title: How to trigger click event without $refs in vue?
body: <p>I have template like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;p @click=&quot;handleParagraphClick&quot;&gt;
      &lt;component v-for=&quot;item in items&quot; :is=&quot;spanComponent&quot;/&gt;
  &lt;/p&gt;
  </code></pre>
  <p>Template of nested span component is like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;span @click=&quot;handleSpanClick&quot;&gt;{{content}}&lt;/span&gt;
  </code></pre>
  <p>Paragraph component is rendered inside contenteditable div.</p>
  <p>When I click on paragraph I want to trigger click event on span within <code>handleParagraphClick</code>.</p>
  <p>(When I click on paragraph I want to put caret into span and mark span as current active node which can be done by calling <code>handleSpanClick</code> but this is another story.)</p>
  <p>It could be done using</p>
  <pre class="lang-js prettyprint-override"><code>this.$refs.mySpan.click()
  </code></pre>
  <p>but I haven't <code>$refs</code> on spans. How can I do it without <code>$refs</code>?</p>
  <p><strong>Upd.</strong></p>
  <p>(When I click on the empty place of the paragraph I want to put caret at the end of the last span and trigger click event for that span. When I click between spans I want to put caret at the beginning of the right span (or at the end of the left span).)</p>