Vue.js3でVue Selectをセットアップしようとしてエラーが発生して困っています。

前提・実現したいこと

Vue.js3でVue Selectをセットアップしようとしてエラーが発生して困っています。
環境により、import文は使用できないため、scriptタグから読み込みしています。

警告とエラーが2つが発生していますが、原因特定ができていません。
vue.global.js:1235　[Vue warn]: Unhandled error during execution of created hook
vue.global.js:1414　Uncaught TypeError: this.$on is not a function

解決方法わかる方いらっしゃいましたらご教授お願いします。

(Vue Select)
https://vue-select.org/

v-selectのタグを使用しない場合は警告が発生していません。

v-selectのタグを使用すると下記のエラーが発生します。

該当のソースコード

読込用のファイル

html
1<link rel="stylesheet" href="~/lib/vue-select/vue-select.css" />
2
3<script src="~/lib/vue/vue.global.js"></script>
4<script src="~/lib/vue-select/vue-select.js"></script>

javascriptの実行ファイル

html
1<div id="app">
2    Vue Select
3
4    <!-- v-selectを使用するとエラー -->
5    <v-select :options="options"></v-select>
6</div>
7
8<script>
9    <!-- window無しで取得できている -->
10    var test1 = Vue;
11    var test2 = VueSelect;
12
13    // Vue.js3のインスタンスの作成
14    const app = Vue.createApp({
15        data() {
16            return {
17                options: [1, 2]
18            }
19        }
20    }); 
21          
22    app.component("v-select", VueSelect.VueSelect);
23
24    const vm = app.mount("#app");
25</script>
26}

発生している問題・エラーメッセージ

console
1You are running a development build of Vue.
2Make sure to use the production build (*.prod.js) when deploying for production.
3
4vue.global.js:1235
5[Vue warn]: Unhandled error during execution of created hook 
6  at <VSelect options= Array(2) > 
7  at <App>
8warn @ vue.global.js:1235
9logError @ vue.global.js:1408
10handleError @ vue.global.js:1400
11callWithErrorHandling @ vue.global.js:1354
12callWithAsyncErrorHandling @ vue.global.js:1360
13callSyncHook @ vue.global.js:6850
14applyOptions @ vue.global.js:6797
15finishComponentSetup @ vue.global.js:7446
16setupStatefulComponent @ vue.global.js:7382
17setupComponent @ vue.global.js:7322
18mountComponent @ vue.global.js:5104
19processComponent @ vue.global.js:5080
20patch @ vue.global.js:4702
21mountChildren @ vue.global.js:4881
22processFragment @ vue.global.js:5043
23patch @ vue.global.js:4695
24componentEffect @ vue.global.js:5197
25reactiveEffect @ vue.global.js:400
26effect @ vue.global.js:375
27setupRenderEffect @ vue.global.js:5162
28mountComponent @ vue.global.js:5120
29processComponent @ vue.global.js:5080
30patch @ vue.global.js:4702
31render @ vue.global.js:5778
32mount @ vue.global.js:4174
33app.mount @ vue.global.js:9162
34(anonymous) @ Create:99
35
36vue.global.js:1414
37Uncaught TypeError: this.$on is not a function
38    at Proxy.created (Select.vue:636)
39    at callWithErrorHandling (vue.global.js:1351)
40    at callWithAsyncErrorHandling (vue.global.js:1360)
41    at callSyncHook (vue.global.js:6850)
42    at applyOptions (vue.global.js:6797)
43    at finishComponentSetup (vue.global.js:7446)
44    at setupStatefulComponent (vue.global.js:7382)
45    at setupComponent (vue.global.js:7322)
46    at mountComponent (vue.global.js:5104)
47    at processComponent (vue.global.js:5080)

行動規範の内容に同意します

回答1件

ベストアンサー

大変失礼しました。

Vue Selectについて、Vue 3にまだ対応できていないようです。
Githubのissueより、12～1月のバージョンアップかもしれないので、対応まで待ちます。

Vue3のcomponentの書き方については、下記の通りで良いようです。

html
1<script>
2    <!-- window無しで取得できている -->
3    var test1 = Vue;
4    var test2 = VueSelect;
5
6    // Vue.js3のインスタンスの作成
7    const app = Vue.createApp({
8        data() {
9            return {
10                options: [1, 2]
11            }
12        }
13    }); 
14
15    app.component("v-select", VueSelect.VueSelect);
16
17    const vm = app.mount("#app");
18</script>