I am trying to create a parent component with all kinds of graphics, and depending on what I need to pass on a specific graphic (raise a child) to another component, but I don't necessarily know how I would dynamically do it for the user.

my html charts (chart.vue)

```html
    <template>  
        <div >
          <bars v-if="type == 'bar'">
             <div class="row gutter-sm">
                <div class="col-md-3"> 
                   <apexchart  ref="chart1" type="bar" :options="options" :series="updatedData"></apexchart>
                </div>
             </div> 
                <div class="col-md-3"> 
                   <apexchart ref="chart3" type="bar" :options="options3" :series="updatedData"></apexchart>
                </div>
           </bars>
           <lines v-if="type == 'line'">
              <div class="row gutter-sm">
                <div class="col-md-3"> 
                   <apexchart ref="chart4" type="line" :options="options4" :series="updatedData"></apexchart>
                </div>  
             </div>
           </lines>
       </div>
    <template>

```

If I wanted to pass on bar graphics to my menu.vue, would it be like this?

my html menu

```html
    <template>  
        <div >
          <table class="data-table-2" style="min-width: 800px">
             <charts type="bar"/>
          </table>
       </div>
    <template>

```

scripts menu

```js
   <script>

       import charts from "./charts.vue"

       export default {
         name: 'menu',
         components: {
            charts
         }
       }
    </script>

```