pass component according to v-if - Vue.JS

Question

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)

    <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

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

scripts menu

   <script>
   
       import charts from "./charts.vue"
       
       export default {
         name: 'menu',
         components: {
            charts
         }
       }
    </script>

Answer 1

You need to define a Props in child component.

//Child Component Script
export default ChildComponent {
    data() {
        return {}
    },
    props: {
        type: string,
    }
}

In parent component you need to call child component and pass type data like this //parent component

<template>
    <div>
        <child-component :type="line"/>
    </div>
</template>

Answer 2

The way you pass values from the parent component to the child component is wrong

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

child component receiving value, and you can set a default value:

// init in child component
props: {
  type: {
    type: String,
    default: 'bar' // set a default value
  }
},
data(){
 ...
}

then you can use type in child component

<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>