title: How to control order of rendering in vue.js for sibling component
body: <p>I have following kind of code:</p>
  
  <pre><code>&lt;div&gt;
    &lt;compA /&gt;
    &lt;compB /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How do I make sure that first <code>compA</code> is rendered only after it <code>compB</code> is rendered.</p>
  
  <p>Why I want is I have some dependency on  few elements of <code>compA</code>, and style of <code>compB</code> depends on presence of those elements.</p>
  
  <p><strong>Why in details</strong>:</p>
  
  <p>I have some complex UI design, where one box will become fixed when you scroll. SO It will not go above the screen when you scroll, it will be fixed once you start scrolling and it start touching the header. So I am using <a href="https://github.com/customd/jquery-visible" rel="nofollow noreferrer">jquery-visible</a> to find if a <code>div</code> with a particular <code>id</code> is visible on the screen, if it is not visible, I change the style and make that box fixed. Following code should give the idea what I am doing:</p>
  
  <pre><code>methods: {
    onScroll () {
      if ($('#divId').visible(false, false, 'vertical')) { // This is div from the compA, so I want to make sure it is rendered first and it is visible
        this.isFixed = false
      } else {
        this.isFixed = true
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.onScroll() }
  },
  destroyed () {
    window.removeEventListener('scroll', this.onScroll)
  }
  </code></pre>
  
  <p>I dont want to make those in same component as one reason is it dont make sense as the nature of these components, and other I use <code>compA</code> at many places, while <code>compB</code> is specific to only one page. Also layout of these  does not allow me to make <code>compB</code> child of <code>compA</code> as suggested in comments.</p>
  
  <p>Any suggestions are welcome.</p>