[Vuejs]-Show child component when promise data is exists and also render the data in child omponent

Create a boolean variable that keeps track of your ajax request, i usually call it loading, or fetchedData, depending on the context. Before the ajax call, set it to true, after the call, set it to false.

Once you have this variable working, you can then conditionally render the result component with v-if. I like to show a loading icon with the corresponding v-else.

Also your template doesn’t seem to have a root element, which is required.

<template>
  <div><h3> Search </h3></div>
  <div class="row">
    <form role="search">
        <div class="form-group col-lg-6 col-md-6">
            <input type="text" v-model="searchKey" class="form-control">
        </div>
        <div class="col-lg-6 col-md-6">
            <button type="button" id="btn2" class="btn btn-danger btn-md" v-on:click="getInputValue">Search</button>
        </div>
    </form>
  </div>
  <result v-if="!loading" :searchdataShow='searchData'></result>
  <div v-else>loading!!</div>
</template>
<script>
 import resultView from './result'
 export default {
  components: {
    'result': resultView
  },
 data () {
    return {
      loading: false,
      searchKey: null,
      searchData: null
    }
  },
  methods: {
   getInputValue: function(e) {
     console.log(this.searchKey)
     this.loading = true;
     if(this.searchKey && this.searchKey != null) {
       this.$http.get('url').then((response) => {
         console.log(response.data)
         this.loading = false;
         this.searchData = response.data
       })
     }
   }
}
</script>