have to add 3 components to one page

Question

In my project, I have 3 components. one component is already showing on the page and now I want to add those 2 components with that component. The code is in below,

<template>
<component v-bind:is="currentComponent" ></component>
</template>
 <script>
   import { ROAST_CONFIG } from '../../../config/config.js';


import ZoneIndex from   './components/zone/Index';



import { listen } from  '../../../util/history.js';;
import axios from 'axios'
let baseUrl = ROAST_CONFIG.API_URL;

export default {
    name: 'LocationsView',
    layout: 'admin/layouts/default/defaultLayout',
    middleware: 'auth',
    components: {

        'zone-index' : ZoneIndex,


    },
    data() {
        return { currentComponent:'','stateId':''}
    },
    methods: {
        updateCurrentComponent(){
            console.log(this.$route.name);
            let vm = this;
            let route  = vm.$route;

            if(this.$route.name  == "Locations"){

                this.currentComponent = "zone-index";

            } 
        }
    },
    mounted() {
        let vm = this;
        let route  = this.$route; 
        window.addEventListener('popstate',this.updateCurrentComponent);
    },
    created() {
        this.updateCurrentComponent();
    }
}   

The ZoneIndex component is showing in the code. The other 2 components are CountryIndex and StateIndex.

Answer 1

The correct way to carry out your procedure would be.

<template>
     <div>
      <zone-index></zone-index>
      <state-index></state-index> 
      <country-index></country-index>
    </div>
    </template>
     <script>
    import ZoneIndex from   './components/zone/Index';
    import CountryIndex from   '...way';
    import StateIndex ryIndex from   '...way';
    import { ROAST_CONFIG } from '../../../config/config.js';
    import { listen } from  '../../../util/history.js';;
    import axios from 'axios'
    let baseUrl = ROAST_CONFIG.API_URL;

    export default {
        name: 'LocationsView',
        layout: 'admin/layouts/default/defaultLayout',
        middleware: 'auth',
        components: { ZoneIndex, CountryIndex, StateIndex },
        data() {
            return { currentComponent:'','stateId':''}
        },
        methods: {
            updateCurrentComponent(){
                console.log(this.$route.name);
                let vm = this;
                let route  = vm.$route;

                if(this.$route.name  == "Locations"){

                    this.currentComponent = "zone-index";

                } 
            }
        },
        mounted() {
            let vm = this;
            let route  = this.$route; 
            window.addEventListener('popstate',this.updateCurrentComponent);
        },
        created() {
            this.updateCurrentComponent();
        }
    }