Form action="/to" is not working when i use vue-autosuggest inside form and how can i add a click event inside template for my add button

<form class="form-inline" action="/search">
            <vue-autosuggest
                ref="autosuggest"
                v-model="term"
                @submit="clickHandler"
                @selected="selectHandler"
                :suggestions="filteredSuggestions"
                :inputProps="inputProps"
                :get-suggestion-value="getSuggestionValue"
                @input="globalSearch(term)"
              >
              <template slot-scope="{ suggestion }">
                <div v-if="suggestionsLength > 0" class="row hover">
                  <div class="col-2 col-mob-35 p-1">
                    <img :src="suggestion.item.digital_asset.thumbnail_productimageurl" class="img-responsive"/>
                  </div>
                  <div class="col-10 tal col-mob-65 p-1">
                    <div style="display:flex;">
                      <h6 class="search-card-title truncate-product">{{suggestion.item.brand}} {{suggestion.item.pack_type}} (Size:  {{suggestion.item.pack_size}})</h6>
                    </div>
                    <h6 class="search-card-title">
                      <b class="price mr-1">Price: ₹ {{suggestion.item.retailer_new_price.new_price }}</b>
                      <span class="LYRnr_ mr-2 search-text"> {{suggestion.item.mrp.toFixed(2)}}</span>
                      <span class="hMGTLH search-text">{{suggestion.item.retailer_new_price.percent_off}} % Off</span>
                      </h6>
                  </div>
                  <div class="col-2 p-1">
                    <b-btn href="#" variant="info" class="add-buton btn-sm ml-0 mt-1 pull-right search-text" @click="updateCart(suggestion.item, 'add')">ADD </b-btn> 
                  </div>
                </div>
                <div v-else class="text-center">
                  <p> No records found ... </p>
                </div>
              </template>
            </vue-autosuggest>
            <div v-if="loading"  class="d-flex justify-content-center suggest-block" >
                <b-spinner variant="warning" sm label="Loading..."></b-spinner>
            </div>
            <div v-if="suggestionsLength === 0"  class="d-flex justify-content-center suggest-block" >
                <p>No records found ... </p>
            </div>
        </form>

What you did: I have just followed vue-autosuggest for the suggested list and its working fine and i also wanted to have a form action when i click on enter

Reproduction sandbox/repository:

Problem description:

1) Suggestions list is working properly and when i try enter the suggest input i have a a form action which is not working once the results are populated below my search box. And the form action is working when i type the keyword and enter without results below the search box 2) And i also have a but in the template list how can i add a custom event inside the template list with my own functuonality

darrenjennings / vue-autosuggest

Form action="/to" is not working when i use vue-autosuggest inside form and how can i add a click event inside template for my add button #206