title: Vue js get parent property AFTER it's ready method has ran
body: <p>I know I can use <code>inherit</code> to allow a child component to grab it's parent's properties, BUT the thing is.. is that I need to grab the property AFTER the parent ready method has ran. I'm having this issue everywhere in order to get width and height of parent components that are set in the ready method.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Carousel = Vue.component('carousel', {
   template: '#carousel',
  
   replace: true,
  
   data: function() {
    return {
     current: 1,
     slideWidth: 600,
     count: 6,
     style: {
      width: 600,
      viewport: 600,
      marginLeft: 0
     }
    }
   },
      
      computed: {
    styles: function() {
     return {
      width: this.style.width + 'px',
      marginLeft: this.style.marginLeft + 'px'
     }
    },
  
    viewport: function() {
     return {
      width: this.style.viewport + 'px'
     }
    },
  
    rounds: Math.floor(this.count / this.show)
   },
  
   props: ['show', 'slideMargin'],
  
   ready: function() {
    this.slideWidth = $(this.$el).width();
    this.count = this.$children.length;
    this.style.width = (this.slideWidth * this.count) + (this.slideMargin * (this.count * 2));
    this.style.viewport = (this.slideWidth * this.show) + (this.slideMargin * (this.show * 2));
   }
  });
  
  var CarouselSlide = Vue.component('carouselslide', {
   template: '#slide',
  
   replace: true,
  
   data: function() {
    return {
     style: {
      width: 200
     }
    }
   },
      
      computed: {
    styles: function() {
     return {
      width: this.style.width + 'px'
     }
    }
   },
  
   ready: function() {
    this.style.width = this.$parent.$get('slideWidth');
   }
  });
  
  new Vue({
   el: '#testimonials'
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#testimonials {
      width: 50%;
      margin: 0 auto;
      position: relative;
      float: left;
      min-height: 1px;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
      display: block;
  }
  
  h3 {
      color: #b50937;
      text-transform: uppercase;
      margin: 0 0 20px;
      font-size: 1.75rem;
  }
  
  .carousel {
      position: relative;
      overflow: hidden;
  }
  
  .carousel .slides {
      overflow: hidden;
      margin: 0 auto;
  }
  
  .carousel .slides .viewport {
      overflow: hidden;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
      transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  }
  
  .carousel .slides .slide {
      position: relative;
      display: block;
      float: left;
      margin: 0 2px;
  }
  
  .carousel .slides .slide .box {
      background-color: #d1dbe5;
      box-sizing: border-box;
      padding: 15px 20px;
  }
  
  .view-all {
      text-align: right;
  }
  
  .arrows {
      position: relative;
      text-align: right;
      width: 100%;
  }
  
  .arrows .arrow {
      background-color: #d3d3d3;
      color: #fff;
      padding: 2px 13px;
      position: static;
      transition: 0.4s ease-in-out;
      display: inline-block;
      cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.13/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="x-template" id="carousel"&gt;
      &lt;div class="carousel"&gt;
          &lt;div class="slides" v-style="viewport"&gt;
              &lt;div class="viewport" v-style="styles"&gt;
                  &lt;content&gt;&lt;/content&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="view-all"&gt;&lt;a href="#" title="View all"&gt;View all &lt;i class="fa fa-angle-double-right"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class="arrows"&gt;
              &lt;div class="arrow prev" v-on="click: prevSlide"&gt;&lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div class="arrow next" v-on="click: nextSlide"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  &lt;script type="x-template" id="slide"&gt;
      &lt;div class="slide" v-style="styles"&gt;
          &lt;content&gt;&lt;/content&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;section id="testimonials"&gt;
      &lt;h3&gt;What People Are Saying About Us&lt;/h3&gt;
      &lt;carousel show="1" slide-margin="2"&gt;
          &lt;carouselslide&gt;
              &lt;div class="phrase"&gt;
                  &lt;div class="box"&gt;
                      We were looking to upgrade our equipment when we came across Ventrac. It was &amp;quot;wow&amp;quot; for 
                      us, why did we suffer for the first six years with these other pieces of equipment when we could of had this.
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/carouselslide&gt;
          &lt;carouselslide&gt;
              &lt;div class="phrase"&gt;
                  &lt;div class="box"&gt;
                      We were looking to upgrade our equipment when we came across Ventrac. It was &amp;quot;wow&amp;quot; for 
                      us, why did we suffer for the first six years with these other pieces of equipment when we could of had this.
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/carouselslide&gt;
      &lt;/carousel&gt;
  &lt;/section&gt;&lt;!-- END #TESTIMONIALS --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my Vue code since it's the only part that's relevant, although you can see what I'm having issues with upstairs ^^ (the snippet)</p>
  
  <pre><code>var Carousel = Vue.component('carousel', {
      template: '#carousel',
  
      replace: true,
  
      data: function() {
          return {
              current: 1,
              slideWidth: 600,
              count: 6,
              style: {
                  width: 600,
                  viewport: 600,
                  marginLeft: 0
              }
          }
      },
  
      computed: {
          styles: function() {
              return {
                  width: this.style.width + 'px',
                  marginLeft: this.style.marginLeft + 'px'
              }
          },
  
          viewport: function() {
              return {
                  width: this.style.viewport + 'px'
              }
          },
  
          rounds: Math.floor(this.count / this.show)
      },
  
      props: ['show', 'slideMargin'],
  
      ready: function() {
          this.slideWidth = $(this.$el).width();
          this.count = this.$children.length;
          this.style.width = (this.slideWidth * this.count) + (this.slideMargin * (this.count * 2));
          this.style.viewport = (this.slideWidth * this.show) + (this.slideMargin * (this.show * 2));
      }
  });
  
  var CarouselSlide = Vue.component('carouselslide', {
      template: '#slide',
  
      replace: true,
  
      data: function() {
          return {
              style: {
                  width: 200
              }
          }
      },
  
      computed: {
          styles: function() {
              return {
                  width: this.style.width + 'px'
              }
          }
      },
  
      ready: function() {
          this.style.width = this.$parent.$get('slideWidth');
      }
  });
  
  new Vue({
      el: '#testimonials'
  });
  </code></pre>
  
  <p>The reason I need to get it from the parent is because the clientWidth includes padding which I can't. So I can't do <code>$(this.$el).width()</code> in the data or computed properties data since <code>$el</code> is not available yet. From my child, I need to get this width AFTER the ready  method has fired.</p>
  
  <p>Thanks for any insight.</p>