преобразовать select в vue-select с динамическими данными (Laravel и Vuejs)

У меня есть динамический список продуктов для создания счета. Теперь я хочу найти продукт из списка select-> option. Я нашел возможное решение, такое как Vue-select в vuejs, но я не мог понять, как преобразовать мой существующий код, чтобы получить выгоду от Vue-select. Кто-нибудь поможет мне, пожалуйста, как мне написать код в «выбрать», чтобы я мог искать продукт за раз из списка?

Мой существующий код -

<td>
   <select id="orderproductId" ref="selectOrderProduct" class="form-control  input-sm" @change="setOrderProducts($event)">
     <option>Choose Product ...</option>
     <option :value="product.id + '_' + product.product_name" v-for="product in invProducts">@{{ product.product_name }}</option>
   </select>                      
</td>

И я хочу преобразовать это что-то вроде -

<v-select :options="options"></v-select>

Таким образом, я могу искать продукты, даже если у меня их много. И мой файл сценария -

<script>
Vue.component('v-select', VueSelect.VueSelect);
var app = new Vue({
  el: '#poOrder',
  data: {

    orderEntry: {
        id: 1,
        product_name: '',
        quantity: 1,
        price: 0,
        total: 0,
    },
    orderDetail: [],
    grandTotal: 0,
    invProducts: [],
    invProducts: [
        @foreach ($productRecords as $invProduct)
            {
                id:{{ $invProduct['id'] }},
                product_name:'{{ $invProduct['product_name'] }}',

            },
        @endforeach
    ],

  },



  methods: {
    setOrderProducts: function(event) {
        //alert('fired');
        var self = this;
        var valueArr = event.target.value.split('_');
        var selectProductId = valueArr[0];
        var selectProductName = valueArr[1];

        self.orderEntry.id = selectProductId;
        self.orderEntry.product_name = selectProductName;

        $('#invQuantity').select();
    },
    addMoreOrderFields:function(orderEntry) {
        var self = this;
        if(orderEntry.product_name && orderEntry.quantity && orderEntry.price > 0) {

            self.orderDetail.push({
                id: orderEntry.id,
                product_name: orderEntry.product_name,
                quantity: orderEntry.quantity,
                price: orderEntry.price,
                total: orderEntry.total,
            });

            self.orderEntry = {
                id: 1,
                product_name:'',
                productId: 0,
                quantity: 1,
                price: 0,
                total: 0,
            }
            $('#orderproductId').focus();
            self.calculateGrandTotal();

        } else {
            $('#warningModal').modal();
        }
        this.$refs.selectOrderProduct.focus();

    },

    removeOrderField:function(removeOrderDetail) {
        var self = this;
        var index = self.orderDetail.indexOf(removeOrderDetail);
        self.orderDetail.splice(index, 1);
        self.calculateGrandTotal();
    },

    calculateGrandTotal:function() {

        var self = this;
        self.grandTotal = 0;
        self.totalPrice = 0;
        self.totalQuantity = 0;

        self.orderDetail.map(function(order){
            self.totalQuantity += parseInt(order.quantity);
            self.totalPrice += parseInt(order.price);
            self.grandTotal += parseInt(order.total);
        });
    },


    setTotalPrice:function(event){

        var self = this;
        //self.netTotalPrice();
        self.netTotalPrice;
    }   

  },

  computed: {
    netTotalPrice: function(){
        var self = this;

        var netTotalPriceValue = self.orderEntry.quantity * self.orderEntry.price;

        var netTotalPriceInDecimal = netTotalPriceValue.toFixed(2);

        self.orderEntry.total = netTotalPriceInDecimal;

        return netTotalPriceInDecimal;
    }

  }
});