javascript - How to control order of rendering in vue.js for sibling component -

i have following kind of code:

<div>   <compa />   <compb /> </div> 

how make sure first compa rendered after compb rendered.

why want have dependency on few elements of compa, , style of compb depends on presence of elements.

why in details:

i have complex ui design, 1 box become fixed when scroll. not go above screen when scroll, fixed once start scrolling , start touching header. using jquery-visible find if div particular id visible on screen, if not visible, change style , make box fixed. following code should give idea doing:

methods: {   onscroll () {     if ($('#divid').visible(false, false, 'vertical')) { // div compa, want make sure rendered first , visible       this.isfixed = false     } else {       this.isfixed = true     }   } }, mounted () {   window.addeventlistener('scroll', this.onscroll() } }, destroyed () {   window.removeeventlistener('scroll', this.onscroll) } 

i dont want make in same component 1 reason dont make sense nature of these components, , other use compa @ many places, while compb specific 1 page. layout of these not allow me make compb child of compa suggested in comments.

any suggestions welcome.

after going through edit realised dependency not data driven event driven (onscroll). have tried something , looks works (the settimeout in code demonstration).

my implementation different of jonatas.

<div id="app">   renderswitch: {{ renderswitch }} // demonstration    <template v-if='renderswitch'>     <comp-a></comp-a>     </template>   <comp-b @rendered='renderswitchset'></comp-b> </div> 

1. when component-b rendered emits event, sets data property in parent of both component-a , component-b.

2. the surrounding <template> tags there reduce additional markup v-if.

3. the moment renderswitch set true. component-a gets created.