Nuxt.js + Firebase を用いて、得意科目・苦手科目が直感的に理解できるレーダーチャートを作成したい。

前提・実現したいこと

現在、私は中学生の家庭教師をしており、生徒の得意な科目と不得意な科目を直感的に理解できるレーダーチャートを、
Vue.js, Nuxt.js, vue-chartjs, chart.js, vuetify, Firebase を用いて開発しております。

具体的には、vuetify で作成したコンポーネントフォームで点数の高い科目・その点数を順に入力したら、最も得点の高い科目を最上部に表示して、そのまま高い科目を順に時計回りに五角形で表示させたいです。

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

①科目を入力するフォームの作成と、②レーダーチャートのサンプルは作成できたのですが、①と②を繋ぎ合わせるロジックが調べてもわからなかったため、オススメのサイト等ございましたら教えていただきたいです。

該当のソースコード

Nuxtjs
1<template>
2  <v-app id="app">
3    <v-row justify="center">
4      <v-dialog v-model="dialog" persistent max-width="600px">
5        <template v-slot:activator="{ on }">
6          <v-btn color="primary" dark v-on="on">
7            科目を入力してください。
8          </v-btn>
9        </template>
10        <v-card>
11          <v-card-title>
12            <span class="headline">科目</span>
13          </v-card-title>
14          <v-card-text>
15            <v-container>
16              <v-row>
17                <v-col cols="12" sm="8">
18                  <v-select :items="[ '国語', '数学', '英語', '社会', '理科' ]" label="1番目に得点の高い科目を選択してね。" multiple />
19                </v-col>
20                <v-col cols="12" sm="8">
21                  <v-select :items="[ '国語', '数学', '英語', '社会', '理科' ]" label="2番目に得点の高い科目を選択してね。" multiple />
22                </v-col>
23                <v-col cols="12" sm="8">
24                  <v-select :items="[ '国語', '数学', '英語', '社会', '理科' ]" label="3番目に得点の高い科目を選択してね。" multiple />
25                </v-col>
26                <v-col cols="12" sm="8">
27                  <v-select :items="[ '国語', '数学', '英語', '社会', '理科' ]" label="4番目に得点の高い科目を選択してね。" multiple />
28                </v-col>
29                <v-col cols="12" sm="8">
30                  <v-select :items="[ '国語', '数学', '英語', '社会', '理科' ]" label="5番目に得点の高い科目を選択してね。" multiple />
31                </v-col>
32              </v-row>
33            </v-container>
34            <small>*入力必須項目です。</small>
35          </v-card-text>
36          <v-card-actions>
37            <v-spacer />
38            <v-btn color="blue darken-1" text @click="dialog = false">
39              Close
40            </v-btn>
41            <v-btn color="blue darken-1" text @click="dialog = false">
42              Save
43            </v-btn>
44          </v-card-actions>
45        </v-card>
46      </v-dialog>
47    </v-row>
48  </v-app>
49</template>
50
51<script>
52export default {
53  data: () => ({
54    dialog: false
55  })
56}
57</script>
58

該当のソースコード

参考にしたサイト

Chartjs について
 vue-chartjs, RadarChart について
 Nuxt.js + Chartjs について
 ApexCharts について

補足情報

packagejson
1{
2  "name": "",
3  "version": "1.0.0",
4  "description": "My epic Nuxt.js project",
5  "author": "toshihirokato",
6  "private": true,
7  "scripts": {
8    "dev": "nuxt",
9    "build": "nuxt build",
10    "start": "nuxt start",
11    "generate": "nuxt generate",
12    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
13  },
14  "dependencies": {
15    "@nuxtjs/axios": "^5.8.0",
16    "chart.js": "^2.9.3",
17    "firebase": "^7.5.2",
18    "nuxt": "^2.10.2",
19    "vue-chartjs": "^3.5.0"
20  },
21  "devDependencies": {
22    "@nuxtjs/eslint-config": "^2.0.0",
23    "@nuxtjs/eslint-module": "^1.1.0",
24    "@nuxtjs/vuetify": "^1.9.1",
25    "babel-eslint": "^10.0.3",
26    "eslint": "^6.7.2",
27    "eslint-plugin-nuxt": ">=0.5.0"
28  }
29}
30