title: How to iterate through the children of a Vue component
body: <p>I have the current structure in my component:</p>
  
  <pre><code>&lt;data-table&gt;
      &lt;template slot="column" field="a"&gt;&lt;/template&gt;
      &lt;template slot="column" field="b"&gt;&lt;/template&gt;
      &lt;template slot="column" field="c"&gt;&lt;/template&gt;
  &lt;/data-table&gt;
  </code></pre>
  
  <p>How do I iterate through these "columns" when rendering my <code>data-table</code>?</p>
  
  <p>Edit: turns out adding refs to my columns didn't work, since according to the docs the refs are only stored in their variable when the components are actually rendered. Instead, I used the <code>$slots</code> variable to iterate over the columns on the <code>mounted</code> method, like this:</p>
  
  <pre><code>mounted: function() {
      this.$slots.column.forEach(
          //my code...
      );
  }
  </code></pre>