Разбил страницу с расписанием на отдельные вьюшки

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "resume",
+    "name": "new-site",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {

resources/views/Schedule.vue

@@ -3,42 +3,22 @@
         <v-sheet class="mt-5 mb-5 rounded-lg w-75">
             <p class="text-h3 ma-5">Расписание стримов</p>
             <p class="ma-5 text-h4">{{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
-            <div class="w-100 d-flex justify-center">
+            <ScheduleTable></ScheduleTable>
-                <v-table class="text-h5 w-66">
-                    <tbody>
-                    <tr v-for="schedule in schedules">
-                        <td>{{ parseDate(schedule.current_date) }} {{ schedule.weekday_name }} {{ schedule.stream_time }}</td>
-                        <td>{{ schedule.name }}</td>
-                    </tr>
-                    </tbody>
-                </v-table>
-            </div>
             <p class="text-h3 ma-5">Ссылочки</p>
-            <div class="w-100 d-flex justify-center">
+            <Links></Links>
-                <v-list class="w-66">
-                    <v-list-item class="ma-5 bg-gradient-noh" elevation="6" v-for="link in links" :href="link.link"> <!-- style="background-color: #E57373; color: #FFFFFF" -->
-                        <template v-slot:prepend>
-                            <v-avatar :image="link.image" rounded="0"></v-avatar>
-                        </template>
-                        <v-list-item-title>{{ link.link_name }}</v-list-item-title>
-                    </v-list-item>
-                </v-list>
-            </div>
-            <!--
-
-            -->
         </v-sheet>
     </v-sheet>
 </template>
 
 <script>
 import axios from "axios";
+import ScheduleTable from "./Schedule/ScheduleTable.vue";
+import Links from "./Schedule/Links.vue";
 
 export default {
     name: "Schedule",
+    components: {Links, ScheduleTable},
     data: () => ({
-        links: [],
-        schedules: [],
         dates: []
     }),
     methods: {
@@ -48,12 +28,6 @@ export default {
         }
     },
     mounted() {
-        axios
-            .get('/api/v1/links')
-            .then(response => (this.links = response.data));
-        axios
-            .get('/api/v1/schedules')
-            .then(response => (this.schedules = response.data));
         axios
             .get('/api/v1/dates')
             .then(response => (this.dates = response.data));
@@ -70,12 +44,6 @@ export default {
     height: 100vh;
 }
 
-.bg-gradient-noh {
-    background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
-    background-size: 200% 200%;
-    animation: gradient 15s ease infinite;
-}
-
 @keyframes gradient {
     0% {
         background-position: 0 50%;

resources/views/Schedule/Links.vue

@@ -0,0 +1,35 @@
+<script>
+    import axios from "axios";
+    export default {
+        name: "Links",
+        data: () => ({
+            links: []
+        }),
+        mounted() {
+            axios
+                .get('/api/v1/links')
+                .then(response => (this.links = response.data));
+        }
+    }
+</script>
+
+<template>
+    <div class="w-100 d-flex justify-center">
+        <v-list class="w-66">
+            <v-list-item class="ma-5 bg-gradient-noh" elevation="6" v-for="link in links" :href="link.link"> <!-- style="background-color: #E57373; color: #FFFFFF" -->
+                <template v-slot:prepend>
+                    <v-avatar :image="link.image" rounded="0"></v-avatar>
+                </template>
+                <v-list-item-title>{{ link.link_name }}</v-list-item-title>
+            </v-list-item>
+        </v-list>
+    </div>
+</template>
+
+<style scoped>
+    .bg-gradient-noh {
+        background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
+        background-size: 200% 200%;
+        animation: gradient 15s ease infinite;
+    }
+</style>

resources/views/Schedule/ScheduleTable.vue

@@ -0,0 +1,37 @@
+<script>
+    import axios from "axios";
+    export default {
+        name: "ScheduleTable",
+        data: () => ({
+            schedules: []
+        }),
+        methods: {
+            parseDate(date){
+                let dateArr = date.split("-");
+                return dateArr[2] + "." + dateArr[1];
+            }
+        },
+        mounted() {
+            axios
+                .get('/api/v1/schedules')
+                .then(response => (this.schedules = response.data));
+        }
+    }
+</script>
+
+<template>
+    <div class="w-100 d-flex justify-center">
+        <v-table class="text-h5 w-66">
+            <tbody>
+            <tr v-for="schedule in schedules">
+                <td>{{ parseDate(schedule.current_date) }} {{ schedule.weekday_name }} {{ schedule.stream_time }}</td>
+                <td>{{ schedule.name }}</td>
+            </tr>
+            </tbody>
+        </v-table>
+    </div>
+</template>
+
+<style scoped>
+
+</style>