title: Get Element Count from within a Slot
body: <p>Consider the following Vue component:</p>
  
  <pre><code>&lt;template&gt;
  
      &lt;!-- Carousel --&gt;
      &lt;div class="carousel-container"&gt;
  
          &lt;div ref="carousel" class="carousel"&gt;
              &lt;slot&gt;&lt;/slot&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  
      export default {
  
          data() {
              return {
                  items: this.$refs.carousel.querySelector('*')
              }
          },
  
          computed: {
              count: function () {
                  return this.items.length;
              }
          },
  
          created () {
              console.log(this.count);
          }
  
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The above does not work, and I think that is because I am attempting to reference <code>refs</code> in the data object.</p>
  
  <p>I am trying to get the <code>count</code> of DOM elements within the <code>.carousel</code> element. How should I go about achieving this?</p>
  
  <h2>Update</h2>
  
  <p>After doing some further research, I have found that it is possible to achieve like so:</p>
  
  <pre><code>&lt;script&gt;
  
      export default {
  
          data() {
              return {
                  items: []
              }
          },
  
          computed: {
              count: function () {
                  return this.items.length;
              }
          },
  
          mounted () {
              this.items = this.$refs.carousel.children;
              console.log(this.count);
          }
  
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>However</strong>, I am not confident that this is the best way to achieve this. I appreciate that 'best' is subjective, but is anyone aware of a 'better' way to achieve this?</p>