using gantt chart with laravel and vue js

Hi i want to use gantt chart in my project so i tried to use htmlxGantt in my laravel vue project so i have created a component call Gantt and a router but the issue that the gantt chart places in the all page and it's not completely shown any solution guys?? this my gantt.vue:

<template>
 <div >
 <div id="gantt_here" style="position:relative;"></div>
 </div>

</template>

<script>
 export default {
    created(){
   gantt.init("gantt_here");
    },
    mounted() {
        console.log('Component mounted.')
    }
 }
 </script>

and this is the pic of the gantt chart how it is been shown in my project:

and how and where i want him to be shown :

and this is the router-link of the gantt component in home.blade.php:

       <li class="nav-item">
    <router-link to="/gantt" class="nav-link">
   <i class="fas fa-tasks" style="color:#05dfd7" ></i>
  <p>
   Gantt

  </p>
</router-link>

Ps: all my component are shown in home.blade.php this is the code :

div class="content-wrapper">
<!-- Content Header (Page header) -->

<!-- /.content-header -->

<!-- Main content -->
<div class="content">
  <div class="container-fluid">
    <router-view ></router-view>
  </div>
</div>

via Chebli Mohamed