Refactored to do all search queries in same file

src/components/Index.vue

@@ -12,7 +12,9 @@
 
     <div class="layout-view">
       <spell-list
-        :spells="spells"
+        v-if="state.spells.data.length"
+        :spells="state.spells.data"
+        :search="search"
       ></spell-list>
     </div>
   </q-layout>
@@ -22,27 +24,12 @@
 import { Loading, Dialog } from 'quasar'
 import Vue from 'vue'
 import 'whatwg-fetch'
-import Query from '../query'
 import { state, dispatch } from '../store'
 import SpellList from './Spelllist'
 
 Vue.component('spell-list', SpellList)
 
 export default {
-  computed: {
-    spells () {
-      if (this.state.spells.data.length === 0) {
-        return []
-      }
-
-      let sortBy = this.search.length >= 3 ? 'sortScore' : 'name'
-
-      return new Query(this.state.spells.data)
-      .search('name', this.search, 5)
-      .sort(sortBy)
-      .results
-    }
-  },
   data () {
     return {
       state,
@@ -78,6 +65,3 @@ export default {
   }
 }
 </script>
-
-<style lang="styl">
-</style>

src/components/Spellitem.vue

@@ -22,7 +22,6 @@ export default {
       return this.level + this.schoolCapitalized + '\n' + this.spell.name
     },
     schoolCapitalized () {
-      debugger
       return this.spell.school.charAt(0).toUpperCase() + this.spell.school.slice(1)
     }
   },

src/components/Spelllist.vue

@@ -56,21 +56,15 @@ import SpellItem from './Spellitem'
 Vue.component('spell-item', SpellItem)
 
 export default {
-  computed: {
+  props: [
-    pageMax () {
+    'spells',
-      let trueMax = this.spells.length / this.perPage
+    'search'
-      return trueMax < 1 ? 1 : trueMax
+  ],
-    },
+  data () {
-    pagedSpells () {
+    return {
-      return new Query(this.sortedSpells)
+      perPage: 10,
-      .paginate(this.page, this.perPage)
+      page: 1,
-      .results
+      sortBy: 'name'
-    },
-    sortedSpells () {
-      return this.spells
-      // return new Query(this.spells)
-      // .sort(this.sortBy)
-      // .results
     }
   },
   watch: {
@@ -80,14 +74,24 @@ export default {
       }
     }
   },
-  props: [
+  computed: {
-    'spells'
+    pageMax () {
-  ],
+      let trueMax = this.filteredSpells.length / this.perPage
-  data () {
+      return trueMax < 1 ? 1 : trueMax
-    return {
+    },
-      perPage: 10,
+    dynamicSortBy () {
-      page: 1,
+      return this.search.length >= 3 ? 'sortScore' : 'name'
-      sortBy: 'name'
+    },
+    pagedSpells () {
+      return new Query(this.filteredSpells)
+      .paginate(this.page, this.perPage)
+      .results
+    },
+    filteredSpells () {
+      return new Query(this.spells)
+      .search('name', this.search, 5)
+      .sort(this.dynamicSortBy)
+      .results
     }
   }
 }