Как использовать плагины jquery в Vue Component в Laravel Framework?

Question

Я использую Laravel для разработки своего сайта. Я приобрел шаблон из themeforest. Я панель входа в систему на моем сайте. Я использую Vue JS в этой панели. Я использую шаблон, который я купил. Проблема в том, что все компоненты шаблона находятся в jquery, поэтому я не могу использовать их внутри моих компонентов vue. Например, у меня есть пользовательские данные в шаблоне. Я хочу использовать тот же дизайн в моем компоненте. Datatable не инициализируется в компоненте vue. Пожалуйста, дайте мне знать, как это сделать. Я не хочу использовать плагины vue, я просто хочу, чтобы плагины jquery шаблона работали в моих компонентах vue. Пожалуйста, помогите мне. Ниже я перечислил код файла лезвия Laravel, а также компонент vue продуктов, в котором я хочу использовать настраиваемую таблицу данных.

Код файла лезвия Laravel

@extends('frontend.shop.layouts.app')

@section('breadcrumb')
  <div class="content-header-left col-md-9 col-12 mb-2">
    <div class="row breadcrumbs-top">
      <div class="col-12">
        <h2 class="content-header-title float-left mb-0">{{ $page_name }}</h2>
        <div class="breadcrumb-wrapper col-12">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('shophome') }}/dashboard">Home</a></li>
            <li class="breadcrumb-item">{{ $parent_page }}</li>
            <li class="breadcrumb-item active">{{ $page_name }}</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('content')
  <section>
    <div id="app">
      @if($original_page_name=='products')
        <product-page></product-page>
      @elseif($original_page_name=='commission')
        <commission-page></commission-page>
      @endif
    </div>
  </section>
@endsection

@section('pagecss')
  @if($original_page_name=='products')
  <link rel="stylesheet" type="text/css" href="{{ asset('public/frontend/shop/app-assets/vendors/css/tables/datatable/datatables.min.css') }}?v={{ time() }}">
  <link rel="stylesheet" type="text/css" href="{{ asset('public/frontend/shop/app-assets/css/pages/data-list-view.css') }}?v={{ time() }}">
  <style>
    .product_page_btn {
      padding:7px 10px;
      margin-right: 3px;
      border-radius: 3px;
      font-size: 13px;
    }
  </style>
  @endif
@endsection

@section('pagescripts')
  @if($original_page_name=='products')
    <!--<script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/datatables.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/pdfmake.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/vfs_fonts.js') }}?v={{ time() }}"></script>-->
    <!--<script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/datatables.min.js') }}?v={{ time() }}"></script>-->
    <!--<script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/buttons.html5.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/buttons.print.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/buttons.bootstrap.min.js') }}?v={{ time() }}"></script>-->
    <!--<script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js') }}?v={{ time() }}"></script>-->
    <script src="{{ asset('public/js/productsapp.js') }}?v={{ time() }}"></script>
  @elseif($original_page_name=='commission')
    <script src="{{ asset('public/js/commission.js') }}?v={{ time() }}"></script>
  @endif
@endsection

** Страница продукта Vue Код компонента **

<template>
  <div class="card px-2">
    <div class="card-body">

      <!--Top Buttons-->
      <div class="mb-1" v-if="buttons_show">
        <div class="row">
          <div class="col-md-12">
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light" v-on:click="{ buttons_show = !buttons_show, search_product_show = !search_product_show, manage_products_show = !manage_products_show }"><i class="fa fa-plus"></i> Add Product</button>
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light"><i class="fa fa-cloud-upload"></i> Import Product</button>
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light"><i class="fa fa-list-alt"></i> Product SKU Wise Report</button>
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light"><i class="fa fa-cloud-download"></i> Download SKU Sheet</button>
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light"><i class="fa fa-clipboard"></i> Download Product Format</button>
          </div>
        </div>
      </div>

      <!--Manage Products-->
      <section id="data-list-view" class="data-list-view-header manage_products" v-if="manage_products_show">
        <div class="action-btns d-none">
          <div class="btn-dropdown mr-1 mb-1">
            <div class="btn-group dropdown actions-dropodown">
              <button type="button" class="btn btn-white px-1 py-1 dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Actions
              </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Delete</a>
                <a class="dropdown-item" href="#">Archive</a>
                <a class="dropdown-item" href="#">Print</a>
                <a class="dropdown-item" href="#">Another Action</a>
              </div>
            </div>
          </div>
        </div>
        <!-- DataTable starts -->
        <div class="table-responsive">
            <vue-good-table
              mode="remote"
              @on-page-change="onPageChange"
              @on-sort-change="onSortChange"
              @on-column-filter="onColumnFilter"
              @on-per-page-change="onPerPageChange"
              :totalRows="totalRecords"
              :isLoading.sync="isLoading"
              :line-numbers="true"
              :pagination-options="{
                enabled: true,
              }"
              :rows="rows"
              :columns="columns"
              :line-numbers="true">
            </vue-good-table>
        </div>
        <!-- DataTable ends -->
      </section>

      <!--Search Products-->
      <div class="mb-2 search_product" v-if="search_product_show">
        <div class="mb-1">
          <div class="row">
            <div class="col-md-2">
              <h4 style="font-size: 1.20rem;">Search Product</h4>
            </div>
            <div class="col-md-10">
              <autocomplete></autocomplete>
            </div>
          </div>
        </div>
        <div class="mb-1">
          <div class="row">
            <div class="col-md-12">
              <h4 style="font-size: 1.20rem;">OR</h4>
            </div>
          </div>
        </div>
        <div class="mb-1">
          <div class="row">
            <div class="col-md-12">
              <p>
                Skip this Step. Move to <button type="button" class="btn btn-success product_page_btn"><i class="fa fa-plus"></i> Add New</button>
              </p>
            </div>
          </div>
        </div>
      </div>

      <!--Add Old Products-->
      <section id="data-list-view" class="data-list-view-header add_old_product d-none">
        <div class="action-btns d-none">
          <div class="btn-dropdown mr-1 mb-1">
            <div class="btn-group dropdown actions-dropodown">
              <button type="button" class="btn btn-white px-1 py-1 dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Actions
              </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Delete</a>
                <a class="dropdown-item" href="#">Archive</a>
                <a class="dropdown-item" href="#">Print</a>
                <a class="dropdown-item" href="#">Another Action</a>
              </div>
            </div>
          </div>
        </div>

        <!-- DataTable starts -->
        <div class="table-responsive">

        </div>
        <!-- DataTable ends -->

      </section>

      <!--Add Products-->
      <div class="mb-2 add_product" v-if="addproduct_show">

      </div>

    </div>
  </div>
</template>

<script>

import axios from 'axios'
import route from 'ziggy';
import { Ziggy } from '../../../ziggy';
import Autocomplete from './Autocomplete.vue';
import SellerProductsLoad from './SellerProductsLoad.vue';
import { VueGoodTable } from 'vue-good-table';

window.Ziggy = Ziggy;

export default {
  components: {
    Autocomplete,
    SellerProductsLoad,
    VueGoodTable
  },
  data() {
    return {
      isLoading: false,
      columns: [
        'sku',
        'product_name',
        'category',
        'selling_price',
        'is_sub_approved',
        'action'
      ],
      rows: [],
      totalRecords: 0,
      serverParams: {
      columnFilters: {
        },
        sort: {
          field: '',
          type: '',
        },
        page: 1,
        perPage: 10
      }
    }
  },
  mounted() {

  },
  methods: {

    updateParams(newProps) {
      this.serverParams = Object.assign({}, this.serverParams, newProps);
    },

    onPageChange(params) {
      this.updateParams({page: params.currentPage});
      this.loadItems();
    },

    onPerPageChange(params) {
      this.updateParams({perPage: params.currentPerPage});
      this.loadItems();
    },

    onSortChange(params) {
      this.updateParams({
        sort: [{
          type: params.sortType,
          field: this.columns[params.columnIndex].field,
        }],
      });
      this.loadItems();
    },

    onColumnFilter(params) {
      this.updateParams(params);
      this.loadItems();
    },
    loadItems() {
      getFromServer(this.serverParams).then(response => {
         this.totalRecords = response.totalRecords;
         this.rows = response.rows;
      });
    }


  }
}
</script>