title: How to access content of slot in another child component
body: <p>Following problem:</p>
  
  <p>I have a Vue.js component which relies on its parent's DOM. But the moment the prop gets passed, it (<code>this.$el</code>) is undefined, probably because it's not yet mounted then.</p>
  
  <p>My component's vue template file looks like this:</p>
  
  <pre><code>&lt;template&gt;
    &lt;md-card&gt;
      &lt;md-card-content&gt;
        &lt;ol&gt;
          &lt;li v-for="item in headings(content)"&gt;
            &lt;a :href="`#${item.id}`"&gt;{{ item.name }}&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ol&gt;
      &lt;/md-card-content&gt;
    &lt;/md-card&gt;
  &lt;/template&gt;
  &lt;script&gt;
    export default {
      props: ['content'],
      methods: {
        headings(content) {
          // DOM element is used
          // At this moment, `content` is undefined
        },
      },
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>The component that uses the one above includes this piece of code:</p>
  
  <pre><code>&lt;article-index :content="this.$el"&gt;&lt;/article-index&gt;
  </code></pre>
  
  <p>I thought of waiting for the parent component to be mounted, but that way I can't seem to keep the template like above, because it would always try to access the method (or variable) instantly.</p>
  
  <p>How can I solve this?</p>
  
  <p>Edit:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="content"&gt;
      &lt;div class="left"&gt;&lt;article-index :content="this.$el"&gt;&lt;/article-index&gt;&lt;/div&gt;
      &lt;div class="article"&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;
      &lt;div class="right"&gt;&lt;slot name="aside"&gt;&lt;/slot&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Here's the parent component's template. The only thing I actually need is the <code>.article</code> div, or the slot's contents.</p>