webpackでjQueryのautocomplete

■webpack.config.js
const webpack = require("webpack");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: "development",

  // ローカル開発用環境を立ち上げる
  // 実行時にブラウザが自動的に localhost を開く
  devServer: {
    static: "dist",
    open: true,
  },

  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: `./src/index.js`,

  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: "main.js",
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
    }),
  ],
  //webpack-config.js

  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { url: false },
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        // Babel のオプションを指定する
        options: {
          presets: [
            // プリセットを指定することで、ES2021 を ES5 に変換
            "@babel/preset-env",
          ],
        },
      },
    ],
  },
  // import 文で .ts ファイルを解決するため
  resolve: {
    // Webpackで利用するときの設定
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
    extensions: ["*", ".js", ".vue", ".json"],
  },
  plugins: [
    // Vueを読み込めるようにするため
    new VueLoaderPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
    }),
  ],
};


■package.jsob
{
  "scripts": {
    "build": "webpack",
    "start": "webpack serve",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "@babel/core": "^7.20.7",
    "@babel/preset-env": "^7.20.2",
    "babel-loader": "^9.1.0",
    "css-loader": "^6.7.3",
    "file-loader": "^6.2.0",
    "jquery-ui": "^1.13.2",
    "style-loader": "^3.3.1",
    "vue-loader": "^15.10.1",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "jquery": "^3.6.3",
    "jquery-ui-sass": "^0.0.1",
    "vue": "^2.6.12"
  }
}

■index.js
// import 文を使って sub.js ファイルを読み込む。
import { hello, hello2, test } from "./sub";
import autocomplete from "jquery-ui/ui/widgets/autocomplete";

import "jquery-ui/dist/themes/base/jquery-ui.css";
import "jquery-ui/dist/themes/base/theme.css";
//import "./style.css";
require("./style.css");

import Autocomplete from "./components/Autocomplete.vue";
import App2 from "./components/App2.vue";
import Vue from "vue";

import App from "./components/App"; // 作ったやつ

new Vue({
  el: "#app2", // アプリをマウントする要素(セレクタで指定)
  components: { App2 }, // Appというコンポーネントを使うよ、という宣言
  template: "<app2/>", // el(今回は#app)の中に表示する内容
});

var el = new Vue({
  el: "#app",
  components: { App2 },
  data: function() {
    return {
      value: "",
      type: "text",
      placeholder: "Input",
      datalist: [{ name: "Banana" }, { name: "Grape" }, { name: "Apple" }],
      vueData: {},
      fruits: ["みかん", "りんご", "メロン", "いちご", "ぶどう"],
      fetchTagList: [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme",
        "Test",
      ],
      userTagList: [],
    };
  },
});

function split(val) {
  return val.split(/( |　)+/);
}
function extractLast(term) {
  return split(term).pop();
}
$("[id^='tags']").autocomplete({
  minLength: 0,
  source: function(request, response) {
    var last = extractLast(request.term);
    const matchList = el.fetchTagList.filter((item) => item.indexOf(last) > -1);
    response(matchList);
  },
  focus: function() {
    return false;
  },
  select: function(event, ui) {
    const index = event.target.dataset.index;
    console.log("index =  " + index);
    el.userTagList.push({ id: "1", tag_name: "あいうえお" });
    //el.userTagList.splice(index, 1, { id: "2", tag_name: "かきくけこ" });
    el.userTagList[index] = { id: "2", tag_name: "かきくけこ" };
    console.log("el.userTagList =  " + el.userTagList[0].id);
    console.log("el.userTagList =  " + el.userTagList[0].tag_name);
    var terms = split(this.value);
    terms.pop();
    terms.push(ui.item.value);
    this.value = terms.join("");
    return false;
  },
});