Nuxt.js のレーダーチャートのグローバルコンポーネントが表示されない。

前提・実現したいこと

現在、こちらのサイトを参考にしてNuxt.js + Chartjs を用いてレーダーチャートを作成しています。
そして、グローバルコンポーネントを作成していた際に、以下のエラーが発生いたしました。

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

[Vue warn]: Unknown custom element: <radar-chart> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App/pages/radar.vue> at app/pages/radar.vue
       <Nuxt>
         <.nuxt/layouts/default.vue> at .nuxt/layouts/default.vue
           <Root>

該当のソースコード

「plugins/vue-chartjs.js」

import Vue from 'vue'
import { Radar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

Vue.component('radar-chart', {
  extends: Radar,
  mixins: [reactiveProp],
  props: {
    options: {
      type: Object,
      default: () => { }
    }
  },
  mounted () {
    this.renderChart(this.data, this.options)
  }
})

該当のソースコード

「pages/radar.vue」

<template>
  <div>
    <radar-chart :data="data" :options="options" />
  </div>
</template>

<script>

export default {
  data () {
    return {
      labels: ['数学', '英語', '理科', '国語', '社会'],
      options: {
        maintainAspectRatio: false,
        animation: {
          duration: 1000,
          easing: 'easeInOutCubic'
        }
      }
    }
  },
  computed: {
    data () {
      return {
        datasets: [
          {
            label: 'My favorite and weak subjects',
            backgroundColor: 'rgba(0, 150, 255, 0.2)',
            borderColor: 'rgba(0, 150, 255, 1)',
            pointBackgroundColor: 'rgba(0, 150, 255, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(0, 150, 255, 1)',
            data: [100, 90, 80, 70, 60]
          }
        ]
      }
    }
  }
}
</script>

試したこと

こちらのサイトを参考に、コンポーネント名を変更したりしましたが、解決に至りませんでした。

該当のソースコード

「package.json」

{
  "name": "",
  "version": "1.0.0",
  "description": "My epic Nuxt.js project",
  "author": "toshihirokato",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.8.0",
    "chart.js": "^2.9.3",
    "firebase": "^7.5.2",
    "nuxt": "^2.10.2",
    "vue-chartjs": "^3.5.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^2.0.0",
    "@nuxtjs/eslint-module": "^1.1.0",
    "@nuxtjs/vuetify": "^1.9.1",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-nuxt": ">=0.5.0"
  }
}