[Vuejs]-Have to add 3 components to one page

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();
        }
    }