Google Custom Search Engine using Vuejs and Bootstrap 4

index.html

 <div id="search-app" class="container">
            <!-- Search form section -->
            <section class="my-5 row justify-content-center">
                    <div class="col-md-6">
                        <div class="input-group mb-3">
                            <input type="text" v-model="q" class="form-control" placeholder="Kata kunci..." aria-label="Recipient's username" aria-describedby="basic-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-secondary" type="button" v-on:click="doSearch()">Cari</button>
                            </div>
                        </div>
                    </div>
            </section>

            <!-- Search result -->
            <section class="row">
                <post-card
                    v-for="post in searchResult.items"  
                    v-bind:post="post">
                </post-card>
            </section>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
        <script src="/js/search.js"></script>

search.js

// Component
Vue.component('post-card', {
    props: ['post'],
    template: '<div class="col-md-6 col-lg-4 mb-4 d-flex">'+
                    '<div class="card card-shadow">' +
                        '<a href="">' +
                        '<img class="card-img-top" :src="post.pagemap.cse_image[0].src"/>'+
                        '</a>'+
                        '<div class="card-body">'+
                            '<h5 class="card-title">'+
                                '<a class="text-dark" :href="post.link">{{ post.title }}</a>' +
                            '</h5>' +
                        '</div>' +
                    '</div>' +
                '</div>'
})


var app = new Vue({
    el: '#search-app',
    data: {
        q: "",
        searchResult: ""
    },
    watch: {
        q: function () {
            console.log(this.q);
            this.debouncedDoSearch()
        }
    },
    created: function () {
        // _.debounce is a function provided by lodash to limit how
        // often a particularly expensive operation can be run.
        // In this case, we want to limit how often we access
        // yesno.wtf/api, waiting until the user has completely
        // finished typing before making the ajax request. To learn
        // more about the _.debounce function (and its cousin
        // _.throttle), visit: https://lodash.com/docs#debounce
        this.debouncedDoSearch = _.debounce(this.doSearch, 500)
    },
    methods: {
        doSearch: function(){
            var app = this
            axios.get('https://www.googleapis.com/customsearch/v1?key=YOUR_API_KEY&cx=CSE_ID&q='+this.q)
                .then(function (response) {
                    app.searchResult = response.data;
                    console.log(app.searchResult);
                })
                .catch(function (error) {
                    console.log(error);
                })
            }
           
    }
});