невозможно получить выбранный выпадающий список и показать данные с помощью select2, axios vue с laravel

Question

У меня есть несколько данных о товарах из таблицы базы данных, и я хочу показать подробную информацию о конкретном товаре, когда выбрана эта опция.Я пытаюсь вызвать класс js (transaksi.js), но это ничего не изменило.Возможно, мне не удалось позвонить в класс js.Итак, что я должен сделать, чтобы это исправить?

<div class="row">
     <div class="col-md-4">
     <!-- SUBMIT DIJALANKAN KETIKA TOMBOL DITEKAN -->
     <form action="{{route('order.checkout')}}" @submit.prevent="addToCart" method="POST">
              @csrf
          <div class="form-group">
               <label for="">product</label>
               <select @change="product" name="product_id" id="product_id"
                       v-model="cart.product_id"
                       class="form-control" required width="100%">
                       <option value="">Pilih</option>
                       @foreach ($products as $product)
                       <option value="{{ $product->id }}">{{ $product->code }} - {{ $product->title }}</option>
                       @endforeach
               </select>
          </div>
          <div class="form-group">
              <label for="">Qty</label>
              <input type="number" name="qty"
                      v-model="cart.qty" 
                      id="qty" value="1" 
                      min="1" class="form-control">
          </div>
          <div class="form-group">
              <button class="btn btn-primary btn-sm"
                      :disabled="submitCart">
                      <i class="fa fa-shopping-cart"></i>  {{ $product->submitCart ? 'Loading...':'Ke Keranjang' }}
              </button>
          </div>
     </form>
  </div>

  <!-- MENAMPILKAN DETAIL PRODUCT -->
  <div class="col-md-5">
       <h4>Detail product</h4>
       <div v-if="product.title">
            <table class="table table-stripped">
                <tr>
                    <th>Kode</th>
                    <td>:</td>
                    <td>{{ $product->code }}</td>
               </tr>
               <tr>
                    <th width="3%">product</th>
                    <td width="2%">:</td>
                    <td>{{ $product->title }}</td>
               </tr>
               <tr>
                    <th>Harga</th>
                    <td>:</td>
                    <td>Rp. @convert($product->price) </td>
               </tr>
          </table>
        </div>
     </div>

     <!-- MENAMPILKAN IMAGE DARI PRODUCT -->
     <div class="col-md-3" v-if="product.photo">
          <img src="/uploads/product/{{$product->photo}}" 
               height="150px" 
               width="150px" 
               :alt="product.title">
     </div>
   </div>

js файл:

new Vue({
el: '#dw',
data: {
    product: {
        id: '',
        price: '',
        name: '',
        photo: ''
    },
    cart: {
        product_id: '',
        qty: 1
    },
    customer: {
        email: ''
    },
    shoppingCart: [],
    submitCart: false,
    formCustomer: false,
    resultStatus: false,
    submitForm: false,
    errorMessage: '',
    message: ''
},
watch: {
    'cart.product_id': function() {
        if (this.cart.product_id) {
            this.getProduct()
        }
    },
    'customer.email': function() {
        this.formCustomer = false
        if (this.customer.name != '') {
            this.customer = {
                name: '',
                phone: '',
                address: ''
            }
        }
    }
},
mounted() {
    $('#product_id').select2({
        width: '100%'
    }).on('change', () => {
        this.cart.product_id = $('#product_id').val();
    });
    this.getCart()
},
methods: {
    getProduct() {
        axios.get(`/api/product/${this.cart.product_id}`)
        .then((response) => {
            this.product = response.data
        })
    },

ничего не изменилось