<form action="javascript:void(0);" method="get">
   <input type="search"  placeholder="Search..."  v-model="search" @keyup.enter="searchPost()" autofocus>
 </form>

<div class="panel panel-default" v-for="post in posts">
  <div class="panel-heading">
    <a :href="'/' + $route.params.trans + '/post/' + post.slug"><h3>{{ post.title }}</h3></a>
    <small class="date" v-if="timeLang =='en'">{{ post.created_at | formatDateEn }}</small>
    <small class="date" v-else-if="timeLang =='id'">{{ post.created_at | formatDateId }}</small>
  </div>
  <div class="panel-body">
    <img :src="'/images/post/' + post.post.image" class="img-single-page img-responsive" alt="" v-if="post.post.image">
    <p>{{post.body | strip_tags | trunCate}}</p>
    <a :href="'/' + $route.params.trans + '/post/' + post.slug" class="btn readmore">Read More</a>
  </div>
</div>
<script>
export default {

data()
{
    return {
        posts: {},
    }
},
created(){
  this.$on('fetchdata', this.fetchPost);
},
methods: {
    fetchPost() {
       axios.get('/' + this.$route.params.trans + '/search?search=' + this.search)
     .then(({data}) => {
     this.posts = data
   }
}

const app = new Vue({
 el: '#app',
 router,
 data: {
     show: false,
     search: '',
 }
 methods: {
 searchPost() {
     this.$emit('fetchdata');
 }
}
});