Vue.jsでelで指定したidの要素の子要素にさらにelで指定したidがある時

例えば下記の様に二つのvueコンポーネントを登録したjsファイルがある

like.js

Vue.component('like-component', require('./components/Like.vue').default);

const like = new Vue({
    el: '#like',
});

star.js

Vue.component('star-component', require('../components/Star.vue').default);


const star = new Vue({
    el: '#star',
    
});

これらを一つのテンプレートで下記の様に読み込むとする

app.blade.php

<section class="p-evaluation id="like">
         <!-- いいね処理したりするコンポーネント -->
         <like-component></like-component>

         <div class="card" id="star">
　　　　　　　　　　　　　　　　　　　　　　　　　<p class="card-title">商品名</p>
            <star-component></star-component>
　　　　　　　　　　　　　　　　　　　　　　　　<p　class="card-comment">コメント</p>
         </div>
</section>

これだと子要素の方のstar-componentは読み込まれずエラーになる。
正確には読み込まれてるが、親要素がコンパイルされた時にも子要素の部分が処理されてるのが
原因？

解決策

子要素のコンポーネントにv-preを記述

app.blade.php

<section class="p-evaluation id="like">
         <!-- いいね処理したりするコンポーネント -->
         <like-component></like-component>

         <div class="card" id="star">
　　　　　　　　　　　　　　　　　　　　　　　　　<p class="card-title">商品名</p>
　　　　　　　　　　　　　　　　　　　　　　　　　<!-- v-preを追加 -->
            <star-component v-pre></star-component>
　　　　　　　　　　　　　　　　　　　　　　　　<p　class="card-comment">コメント</p>
         </div>
</section>

これでOK。
意外とあっさり。