vue.js search autocomplete for Django

gistfile1.txt

        <div id="base">
          <div class="btn-group" :class="{show : dropDown}">
            <input class="form-control mr-sm-2" placeholder="{% trans 'Search' %}" v-model="q" data-toggle="dropdown" aria-haspopup="true" :aria-expanded="{true : dropDown}">
              <div class="dropdown-menu">
                  <search-item 
                  v-for="item in search" 
                  :item="item" 
                  :key="item.id">  
                  </search-item>
              </div>
          </div>
        </div>
        
      <script type="text/javascript">

      Vue.component('search-item', {
        props: ['item', 'value'],
        delimiters: ["#{", "}"],
        template: '#search-item',
      })

      Vue.http.headers.common['X-CSRF-TOKEN'] = csrftoken

      var base = new Vue({
        el: '#base',
        delimiters: ["#{", "}"],
        data: {
          searchendpoint: 'http://' + window.location.host + '/search/autocomplete/?q=',
          q: '',
          search: [],
          //show: true
        },
        computed: {
          dropDown: function() {
            if ( Object.keys(this.search).length > 0) {
              return true
            } else {
              return false
            }
          }
        },
        watch: {
          q: function() {
            if (this.q.length > 0) {
              this.$http.post(this.searchendpoint + this.q).then(
                  function(response){
                    this.search = response.data
                  }, function(error){
                  //console.log(error)
                })
              }
            }
          }
        })

      </script>

      <script type="text/x-template" id="search-item">
          <a :href="item.link" class="btn dropdown-item">
          #{ item.title }
          </a>
      </script>
      <script type="text/javascript">