- [API] Segregated API files, Implemented spells-list, component that calls the API

client/src/pages/spells.vue

@@ -1,34 +1,19 @@
 <template>
     <div class="spells-page">
-        <v-for v-for="(spell, index) in spells" :key="index">
-            <spell-card v-bind="spell"/>
-        </v-for>
+        <spell-list/>
     </div>
 </template>
 
 <script>
-import axios from 'axios';
-import spellcard from "../components/spells/spell-card";
+
+// Components
+import spellslist from "../components/spells/spells-list"
 
 export default {
     name: 'spells',
     components: {
-        'spell-card': spellcard,
-    },
-    data() {
-        return {
-            spells: []
-        }
-    },
-    mounted() {
-        axios({ method: "GET", "url": "http://localhost:2814/api/spells"})
-        .then(result => {
-            this.spells = result.data.spells;
-            console.log(result)
-        }, error => {
-            console.log(error)
-        })
-    },
+        'spell-list': spellslist,
+    }
 }
 
 </script>