pedi2/resources/js/components/CategoriasContainer.vue

<template>
	<div v-show="visible" class="container">
      <div class="columns is-multiline is-mobile">
        <div v-for="(categoria,i) in categorias" :key="i" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
          <div @click.capture="seleccionarCategoria(categoria)" class="card" style="height:100%" >
            <div class="card-content">
              <div class="media">
                <div class="media-content" style="overflow:hidden">
                  <p class="title is-6" v-text="categoria"></p>
                </div>
              </div>
            </div>
          </div><!-- END CARD -->
        </div><!-- END BLOCK COLUMN -->
      </div><!-- END COLUMNS -->
  </div><!-- END CONTAINER -->
</template>

<script>
	export default {
		data() {
		    return {
		      categorias: null,
		      visible: true
		    }
		  },
		  mounted() {
		    axios.get("/api/categorias").then(response => {
		      this.categorias = response.data;
		    });
		    Event.$emit("migas-setear-como-inicio", this.$rootMiga);
			Event.$on("categoria-seleccionada", (_) => this.visible = false)
		  },
		  methods: {
		    seleccionarCategoria(categoria) {
		      this.visible = false;
		      Event.$emit("categoria-seleccionada",'categoria',categoria);
		    }
		  }
	}
</script>