pimp my app

src/App.vue

@@ -5,7 +5,6 @@
       @click="changeShowTable">
     <component 
       :is='currentCategoryView'
-      @selectcategory='onSelectCategory'
       :categories='categories'>
     </component>
   </div>
@@ -14,15 +13,12 @@
 <script>
 import CategoriesUl from './components/CategoriesUl.vue'
 import CategoriesTable from './components/CategoriesTable.vue'
-import axios from 'axios'
-
 
 export default {
   name: 'app',
   data () {
     return {
-      showTable: false,
-      categories: []
+      showTable: false
     }
   },
   computed: {
@@ -33,21 +29,9 @@ export default {
   methods: {
     changeShowTable() {
       this.showTable = !this.showTable
-    },
-     onSelectCategory (category) {
-      category.selected = !category.selected
     }
   },
 
-  mounted: function () {
-    var url = 'https://raw.githubusercontent.com/jesuslerma/vuejs101-guide/master/categories.json'
-    var that = this
-
-    axios.get(url).then(function (response) {
-      that.categories = response.data
-    })
-  },
-
   components: {
     categoriesUl: CategoriesUl,
     categoriesTable: CategoriesTable

src/components/CategoriesUl.vue

@@ -11,7 +11,7 @@
 </template>
 <script >
   import CategoryLi from './CategoryLi.vue'
-    import { listMixin } from '../mixins/CategoriesMixin'
+  import { listMixin } from '../mixins/CategoriesMixin'
 
   export default {
     mixins: [listMixin],

src/mixins/CategoriesMixin.js

@@ -1,10 +1,25 @@
+const axios = require('axios')
+
 module.exports = { 
   listMixin: {
-    props: ['categories'],
+    data() {
+      return {
+        categories: []
+      }
+    },
     methods: {
-      selectCategory: function (category) {
+      selectCategory (category) {
+        category.selected = !category.selected
         this.$emit('selectcategory', category)
       }
+    },
+    mounted: function () {
+      var url = 'https://raw.githubusercontent.com/jesuslerma/vuejs101-guide/master/categories.json'
+      var that = this
+
+      axios.get(url).then(function (response) {
+        that.categories = response.data
+      })
     }
   }
 }