Multiple vue files on the same element (Laravel + Vue.js)

I have registered a global component in app.js of Laravel called <unread>. In one of my blade files, I created a new Vue instance to handle a functionality that sits on the same #app element.

The problem is that the global component is not rendered in this page. My question is if its possible to get around this problem without making a separate component? And if its even valid to follow this approach.

[Vue warn]: Invalid Component definition: unread

(found in Root)

I was not able to find an explanation or solution on this. Please enlighten me. Heres my code.

In app.js,

Vue.component('unread', require('./components/core/Unread.vue'));

import { store } from './store'

window.onload = function () {
   const app = new Vue({
   el: '#app',
   store
  });
}

In blade file,

@section('scripts')
 <script type="text/javascript">    
   window.onload = function() {
    new Vue({
      el: '#app',
      data: {
        //data here
       },
      //rest of code
    });
   };
 </script>

Note: removing window.onload in app.js breaks my application.

via Chebli Mohamed