Vuetifyが正常に機能しない

前提・実現したいこと

nuxt.jsでアンケートアプリを作っています。Vuetifyでデザインをあてようとしています。

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

公式サイトのコードをコピーしても同じようなデザインにならずに困っています。
Vuetifyパッケージのインストールの段階でなにか間違ってるような気がしますが、Node.jsの基礎的な部分の知識が不足してるため対処法がわかりません。
インストールは公式リファレンスを参考に

npm install @nuxtjs/vuetify -D
nuxt.config.jsに'@nuxtjs/vuetify',を追加
package/にvuetify.jsを新規作成

該当のソースコード

packagejson
1  "dependencies": {
2    "@fortawesome/fontawesome-free": "^5.12.0",
3    "@nuxtjs/dotenv": "^1.4.1",
4    "element-ui": "^2.12.0",
5    "firebase": "^7.6.1",
6    "lodash": "^4.17.15",
7    "nuxt": "^2.0.0",
8    "stylus": "^0.54.7",
9    "stylus-loader": "^3.0.2",
10    "underscore": "^1.9.1",
11    "vue": "^2.6.11",
12    "vue-template-compiler": "^2.6.11",
13    "vuexfire": "^3.2.0"
14  },
15  "devDependencies": {
16    "@nuxtjs/vuetify": "^1.9.1",
17    "normalize.css": "^8.0.1"
18  }
19

vuetifyjs
1import '@fortawesome/fontawesome-free/css/all.css'
2import "vuetify/dist/vuetify.min.css";
3import Vue from 'vue'
4import Vuetify from 'vuetify/lib'
5
6Vue.use(Vuetify)
7
8export default ctx => {
9  const vuetify = new Vuetify({
10    theme: {
11      dark: false
12    },
13    icons: {
14      iconfont: "fa"
15    }
16  })
17  ctx.app.vuetify = vuetify
18  ctx.$vuetify = vuetify.framework
19}

nuxtconfigjs
1
2export default {
3  mode: "spa",
4  /*
5   ** Headers of the page
6   */
7  head: {
8    title: process.env.npm_package_name || "eyetest",
9    meta: [
10      { charset: "utf-8" },
11      { name: "viewport", content: "width=device-width, initial-scale=1" },
12      {
13        hid: "description",
14        name: "description",
15        content: process.env.npm_package_description || ""
16      }
17    ],
18    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
19  },
20  /*
21   ** Customize the progress-bar color
22   */
23  loading: { color: "#fff" },
24  /*
25   ** Global CSS
26   */
27  css: ["normalize.css"],
28  /*
29   ** Plugins to load before mounting the App
30   */
31  plugins: ["@/plugins/firebase", '@/plugins/vuetify'],
32  /*
33   ** Nuxt.js dev-modules
34   */
35  buildModules: ["@nuxtjs/vuetify"],
36  /*
37   ** Nuxt.js modules
38   */
39  modules: ["@nuxtjs/dotenv"],
40  /*
41   ** Build configuration
42   */
43  build: {
44    vender: ['vuetify'],
45    /*
46     ** You can extend webpack config here
47     */
48    extend(config, ctx) {}
49  }
50};
51

自分で調べたことや試したこと

公式リファレンスを読み直してvue add vuetifyする必要があると思って実行するも

Vue packages version mismatch:

- vue@2.6.11 (C:\Users*****\AppData\Roaming\npm\node_modules\vue\dist\vue.runtime.common.js)
- vue-template-compiler@2.6.10 (C:\Users*****\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\vue-template-compiler\package.json)

と怒られました。
npm update -g vue-template-compilerをしても上記のエラーが返されてしまいます。
よろしくお願いします。

こちらの記事を参考にC:\Users*****\AppData\Roaming\npm\node_modules\を削除してみましたが、

internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'C:\Users\h-kubota\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

と返されました。