vue3でimport vuetify npm run build時にエラー

laravel9＋vue3＋vuetify3を使用してページネーション機能を実装しようとしています。

import Vue from "vue"
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

以上のコードをApp.vueに追加して
npm run buildを実行したところ
以下のようなエラーが出ました。

実現したいこと

正常に
npm run buildを実行し
ページネーション機能を実装したい。

該当のソースコード

App.vue

vue
1
2<template>
3 
4  <div>
5    <v-pagination v-model="page" :length=10></v-pagination>
6  </div>
7</template>
8
9
10
11
12<script>
13
14import Vue from "vue"
15import Vuetify from 'vuetify'
16import 'vuetify/dist/vuetify.min.css'
17import { ref } from 'vue'
18import { useRoute, onBeforeRouteUpdate } from 'vue-router'
19import axios from 'axios'
20
21
22Vue.use(Vuetify)
23
24async function getAPI (offset, perpage) {
25  const res = await axios.get("/api/hello", {
26    params: {
27      offset: offset,
28      perpage: perpage
29    }
30  })
31  return res.data
32}
33
34export default {
35  name: 'Articles',
36  setup() {
37    const route = useRoute();
38    const perpage = 10;
39    let page = ref(0);
40    let offset = 5;
41    let list = ref([]);
42
43
44    console.log(route);
45
46    if (null!=route && route.query) {
47      page.value = (route.query.page) ? parseInt(route.query.page) : 1;
48    } else {
49      page.value = 1;
50    }
51
52    const setOffset = () => {
53
54      console.log("page.value:"+page.value);
55      console.log("perpage:"+perpage);
56      offset = (page.value > 0) ? (page.value - 1) * perpage : 0;
57
58    }
59
60    const load = async () => {
61      try {
62        console.log(offset);
63        list.value = await getAPI(offset, perpage);
64        console.log(list.value);
65      } catch (error) {
66        console.error(error) // catch any errors that may occur in getAPI
67      }
68    }
69    
70    setOffset()
71    load()
72
73    onBeforeRouteUpdate(async (to, from) => {
74      if (to.query.page !== from.query.page) {
75        page.value = to.query.page;
76        setOffset()
77        load()
78      }
79    })
80
81    return {
82      perpage,
83      page,
84      list
85    }
86  }
87}
88
89
90
91</script>

package.json

json
1
2{
3    "private": true,
4    "scripts": {
5        "dev": "vite",
6        "build": "vite build"
7    },
8    "devDependencies": {
9        "@vitejs/plugin-vue": "^4.0.0",
10        "axios": "^1.2.1",
11        "laravel-vite-plugin": "^0.7.0",
12        "lodash": "^4.17.19",
13        "postcss": "^8.1.14",
14        "vite": "^3.0.0"
15    },
16    "dependencies": {
17        "vite-plugin-vuetify": "^1.0.1",
18        "vue": "^3.2.45",
19        "vue-router": "^4.1.6",
20        "vuetify": "^3.0.5"
21    }
22}
23
24

package-lock.json　一部

json
1
2 "vuetify": {
3            "version": "3.0.5",
4            "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.5.tgz",
5            "integrity": "sha512-ciX+9XuHQ4zx27dEceHrs6xuCeqPgo91DhvCm+udbp0Qg95phad03uVcdHvyv1XW/stgdZGneiqg5dxQvLGzPw=="
6        }
7

試したこと

vuetifyのバージョンが古いことによる問題だと思い
vuetifyのバージョンを3.0.5指定でインストールし直す
しかし、
npm infoでバージョン確認したところ以下の画像のような出力結果となったので
グローバルでvuetifyがインストールされている可能性があると思い
グローバルでアンインストールを行い
グローバルでインストールされていない事を
npm list -gで確認。
その後、npm infoで再度、パッケージ情報を確認するが以下の画像に示す状況と変化はなし。