title: Get a reference to a Vue child element
body: <p>I have a Vue.js component where the template looks like:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class="map" /&gt;
      &lt;div class="something-else" /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>In the <code>&lt;script&gt;</code> portion I'd like to get a reference to the element with class <code>map</code>. I know you can use <code>this.$el</code> to reference the outermost element, but how would I select one of its children? I'd prefer not use the CSS class as a selector, since there could be many instances of this component that all have the same class.</p>
  
  <p>My use case is I need to pass in a DOM element to the <a href="http://leafletjs.com/reference.html#map-constructor" rel="nofollow noreferrer">constructor</a> for Leaflet, a mapping library.</p>