:recycle: rename role -> target since we do not know if its a role or job candidate | moved graph data somewhere for easier extending

frontend/src/components/ProfileCard.vue

 import PairingButton from './PairingButton.vue'
 
 const router = useRouter()
-// const isPaired = ref(true)
-const isPaired = ref(false)
+const isPaired = ref(true)
+// const isPaired = ref(false)
 
 const props = defineProps({
     card: {

frontend/src/components/SpiderChart.vue

         required: true,
         type: Object,
     },
-    roleData: {
+    targetData: {
         required: true,
         type: Object,
     },
 }
 const role = {
     label: 'Role',
-    data: props.roleData,
+    data: props.targetData,
     backgroundColor: 'rgba(3, 136, 166, 0.30)',
     borderColor: '#0388A6',
     ...chartStyleDefaults,

frontend/src/components/SummaryBar.vue

                     p {{ tabContent[item].tab }}
                     SpiderChart(
                         :labels='aspects.map(label => label.name)'
-                        :profile-data='[5.7, 5.2, 4.8, 5.2, 4.9, 4.9]'
-                        :role-data='[5.3, 4.8, 5.7, 4.8, 5.6, 4.8]'
+                        :profile-data='profileScore'
+                        :target-data='targetScore'
                         profile-name='lucy'
                         v-if='isTab'
                     )
         },
     },
     emits: ['tab-change'],
+    data: () => ({
+        profileScore: [5.7, 5.2, 4.8, 5.2, 4.9, 4.9],
+        targetScore: [5.3, 4.8, 5.7, 4.8, 5.6, 4.8],
+    }),
     methods: {
         onTabChanged(tabs) {
             this.$emit('tab-change', tabs)