Show a component based on drop down in Vue.js

I would like to show a component based on another drop down value of another component. My component is inside Larvel Blade file like below.

@section('content')
    <div id="app">
        <shop-component />
    </div>
@endsection

My Vue.JS Shop component is like below.

<template>
    <div class="form-group">
        <label>Select Shop:</label>
        <select class='form-control' @change="prayer_time($event)">
            <option value="">Select Shop</option>
            <option :key="data.id" v-for='data in shop' :value='data.id'>{{ data.name }}</option>            
        </select>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log();
        },
        data(){
            return {
                shop: [],
            }
        },
        methods:{
            getShops: function () {
                axios.get('/api/v1/getShop')
                .then(function (response) {
                    this.shop = response.data;
                }.bind(this));
            },
            open_time(event) { 
                console.log(event.target.value);

                // I  would like to show another component here when a value selected in dropdown list
            }
        },
        created: function(){
            this.getShops()
        }
    }
</script>

I am getting output like below.