VueJs Component registering in new instance with another but not showing anything

my app.js contain some component which are rendering but whenever I trying to add new component by registering and using it show nothing.

in app.js apptwo will be the new instance and dashboard is the new component

require('./bootstrap');

window.Vue = require('vue');

// import dashboard from './components/DashboardComponent';
Vue.component('dashboard', require('./components/DashboardComponent.vue').default);


// Main Screens Components
Vue.component('user-list', require('./components/UserList.vue').default);
Vue.component('main-screen', require('./components/Main.vue').default);

//  Streaming Components
Vue.component("broadcaster", require("./components/Broadcaster.vue").default);
Vue.component("viewer", require("./components/Viewer.vue").default);

// Vue.component('video-chat', require('./components/VideoChat.vue').default);

Vue.prototype.$userId = document.querySelector("meta[name='user-id']").getAttribute('content');


import VueTwo from 'vue';
import Vue from 'vue';
import Vuetify from 'vuetify';

const app2 = new VueTwo({
  el:'#apptwo',
  component: { dashboard }
});

Vue.use(Vuetify); 

const app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
});



Echo.private('chat')
  .listen('MessageSent', (e) => {
    this.messages.push({
      message: e.message.message
    });
});

The Home.blade.php is

@extends('layouts.app')

@section('content')

<div class="apptwo">
    <dashboard></dashboard>
</div>
@endsection