UPD: Refactor

src/components/device/DevicePreview.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div>
+      <div class="px-4 py-5">
+        <h1 class="text-lg">
+          {{ $t('preview.title')}}
+        </h1>
+      </div>
+      <div class="flex justify-center">
+        <div
+          class="flex bg-cover w-72 h-72 mb-7"
+          style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
+          <div v-if="profiles" class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
+            <div class="self-center w-8 mb-1 opacity-50">
+              <img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
+            </div>
+            <h2 v-for="feedbackConfig in profiles" :key="feedbackConfig" class="self-center font-pixellg text-5xl ">
+              {{ feedbackConfig.pos }}</h2>
+
+            <div class="self-center font-pixelsm text-md pt-1 pb-2">{{ profiles.name }}</div>
+            <DeviceBar class="self-center"/>
+            <div id="scales" class="flex self-center text-xs py-0" />
+
+            <div
+              v-for="profileConfig in profiles"
+              :key="profileConfig"
+              class="self-center text-center text-muted-foreground font-pixelsm text-xs pt-0.5 w-40">
+              {{ profileConfig.profileDesc }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+      <h2>{{ $t('config_options.title') }}</h2>
+    </div>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import DeviceBar from '@/components/device/DeviceBar.vue'
+
+export default {
+  name: 'DevicePreview',
+  components: { DeviceBar },
+  data() {
+    return {
+      profiles: [],
+    }
+  },
+  async created() {
+    try {
+      const res = await axios.get('http://localhost:3001/profiles/5867')
+      this.profiles = res.data
+    } catch (e) {
+      console.error(e)
+    }
+  },
+}
+</script>