diff --git a/src/App.vue b/src/App.vue
index cbeb931..6b70d8a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,6 @@ div.contenedor(:style="anchoBarraLateral")
                 Recomendamos un computador o laptop para obtener
                 el funcionamiento completo.
 
-
 //
 </template>
 
@@ -58,6 +57,7 @@ div.contenedor(:style="anchoBarraLateral")
             facultad
             escuela
             anchoBarraLateral
+            cambiarEstadoBarraLateral
         }
 
     export default {
diff --git a/src/components/App/barra-lateral.vue b/src/components/App/barra-lateral.vue
index c02f334..5f4fab5 100644
--- a/src/components/App/barra-lateral.vue
+++ b/src/components/App/barra-lateral.vue
@@ -58,19 +58,59 @@ div.lateral
 </template>
 
 <script lang="coffee">
+    import {ref, computed} from "vue"
+    import {useStore} from "vuex"
     import vCheckBox from "../v-checkbox.vue"
     escuelas = require "json-loader!yaml-loader!../../assets/escuelas.yaml"
 
-    export default
+    setup = =>
+        store = useStore()
+
+        escuelas = ref escuelas
+        anioSeleccionado = ref 2018
+        periodoSeleccionado = ref 2
+        areaSeleccionada = ref "Ingenierías"
+        facultadSeleccionada = ref "fips"
+        escuelaSeleccionada = ref "ingenieriadesistemas"
+
+        año = computed (=> store.state.año)
+        periodo = computed (=> store.state.periodo)
+        facultad = computed (=> store.state.facultad)
+        escuela = computed (=> store.state.escuela)
+        datos = computed (=> store.state.datos)
+        urlEscuela = computed (=>
+            "http://" + facultadSeleccionada.value + ".unsa.edu.pe/" + escuelaSeleccionada.value + "/")
+        mostrarDescansos = computed ({
+            get: -> store.state.mostrarDescansos
+            set: (value) -> store.commit "cambiarMostrarDescansos", value
+        })
+        temaOscuro = computed({
+            get: -> store.state.color == "oscuro"
+            set: (value) ->
+                store.commit "cambiarColor", (if value == true then "oscuro" else "claro")
+        })
+
+
+        {
+            escuelas
+            anioSeleccionado
+            periodoSeleccionado
+            areaSeleccionada
+            facultadSeleccionada
+            escuelaSeleccionada
+            año
+            periodo
+            facultad
+            escuela
+            datos
+            urlEscuela
+            mostrarDescansos
+            temaOscuro
+        }
+
+    export default {
         name: "barra-lateral"
-        components: { vCheckBox }
-        data: ->
-            escuelas: escuelas
-            añoSeleccionado: 2018
-            periodoSeleccionado: 2
-            areaSeleccionada: "Ingenierías"
-            facultadSeleccionada: "fips"
-            escuelaSeleccionada: "ingenieriadesistemas"
+        components: {vCheckBox}
         props:
             barraOculta:
                 type: Boolean
@@ -78,27 +118,8 @@ div.lateral
             fnCambiarEstadoBarra:
                 type: Function
                 required: true
-        computed:
-            año: -> @$store.state.año
-            periodo: -> @$store.state.periodo
-            facultad: -> @$store.state.facultad
-            escuela: -> @$store.state.escuela
-            datos: -> @$store.state.datos
-            urlEscuela: ->
-                "http://" + @facultadSeleccionada + ".unsa.edu.pe/" + @escuelaSeleccionada + "/"
-            mostrarDescansos:
-                get: -> @$store.state.mostrarDescansos
-                set: (value) -> @$store.commit "cambiarMostrarDescansos", value
-            temaOscuro:
-                get: -> @$store.state.color == "oscuro"
-                set: (value) ->
-                    @$store.commit "cambiarColor",
-                        if value == true then "oscuro"
-                        else "claro"
-
-        watch:
-            escuelaSeleccionada: (n) ->
-                console.log "Cambiado a #{n}"
+        setup
+    }
 
 #
 </script>
diff --git a/src/components/Inicio/anio.vue b/src/components/Inicio/anio.vue
index 226f1f0..f953a6e 100644
--- a/src/components/Inicio/anio.vue
+++ b/src/components/Inicio/anio.vue
@@ -15,16 +15,26 @@ div
 </template>
 
 <script lang="coffee">
+    import {ref} from "vue"
     import curso from "./curso.vue"
     import tablaHorarios from "./tabla-horarios.vue"
     import vCheckbox from "../v-checkbox.vue"
     import { reiniciarTabla } from "./tablaHorarios/funcionesResaltado.coffee"
 
-    export default
+    setup = (props) =>
+        abierto = ref true
+
+        reiniciarTablaVue = =>
+            nombreAño = "_" + (props.nombreAño.substring 0, (props.nombreAño.indexOf " "))
+            reiniciarTabla nombreAño
+
+        {
+            abierto
+        }
+
+    export default {
         name: "Anio"
-        components: { curso, tablaHorarios, vCheckbox }
-        data: ->
-            abierto: true
+        components: {curso, tablaHorarios, vCheckbox}
         props:
             año:
                 type: Object
@@ -32,10 +42,8 @@ div
             nombreAño:
                 type: String
                 required: true
-        methods:
-            reiniciarTablaVue: ->
-                nombreAño = "_" + (@nombreAño.substring 0, (@nombreAño.indexOf " "))
-                reiniciarTabla nombreAño
+        setup
+    }
 
 #
 </script>