app.js
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';


import '../../node_modules/nprogress/nprogress.css';

const axios = require('axios');


Vue.use(VueRouter);



const app = new Vue({
    el: '#app',

    data: function() {
        return {
            outputs: []
        }
    },


    mounted() {
        axios.get('/api/output')
            .then((response) => {
                this.outputs = response.data;
                console.log(this.outputs);
            })
            .catch((err) => {
                console.log(err);
            });



    },

    router:new VueRouter(routes),

});

Outputs.vue
<template>
    <div><div class="text-grey-darkest font-normal uppercase text-3xl font-bold leading-none mb-3">Outputs</div>
    <ul>
        <li v-for="(journal_id) in outputs" v-text="journal_id"></li>

    </ul>
    </div>
</template>

<script>

    export default{};
</script>