Selecting Item from Array with Vue.js for Live Search

I am building a live search component with Vuejs. The search is working as expected. On keyup the method populates an unordered list. I am at a loss but need to:

1. Click on a selection from the search results and populate the input with that name.
2. Get the selected id.

Any suggestions?

The View

<label>Vendor:</label>
   <input type="text" v-model="vendor" v-on:keyup="get_vendors">
       <div class="panel-footer" v-if="vendors.length">
            <ul class="list-group">
                <li class="list-group-item for="vendor in vendors">
                    
                </li>
            </ul>
       </div>

The Script

export default {
        data: function() {
            return {
                vendor:'',
                vendors: []
             }
        },
        methods: {
            get_vendors(){
                this.vendors = [];
                if(this.vendor.length > 0){
                    axios.get('search_vendors',{params: {vendor: this.vendor}}).then(response => 
                    {
                        this.vendors = response.data;
                    });
                }
            }
        }
    }
</script>

The Route

Route::get('search_vendors', 'vendorController@search_vendors');

The Controller

    public function search_vendors(Request $request){
        $vendors = vendor::where('vendor_name','LIKE','%'.$request->vendor.'%')->get();
        return response()->json($vendors);
    }

via Chebli Mohamed