om/public/routes/home.js

const HomeRouter = {
    template: `
<div>
    <div id="om-msg-cards" class="column pull-right-sm is-four-fifths-desktop">
        <b-button id="escape-search-link"
            v-if="_isSearchActiv"
            @click="goBackToDashboard"
            icon-left="arrow-left"
            type="is-primary"
            @toggle-escape-search-link="toggleEscapeSearchLink"
            outlined>
            zurück zu allen Einträgen
        </b-button>
        <!--<b-button id="subscribe-btn" type="is-primary" v-if="_isSubscripeButtonActiv" @update-home-abo-button="updateHomeAboButton" @click="changeSubscribtion">
            {{ subscripeTagName }}
        </b-button>--><br><br>
        <MsgCard
            v-for="id in messagelist.slice().reverse()"
            :key="id"
            :msg="messages[id] || {}"
            :isBookmark="bookmarkArray[id]">
        </MsgCard>
    </div>
</div>`,
    data: function () {
        return {
            messagelist: _messagelist,
            messages: _messages,
			isSearchActiv: _isSearchActiv,
			isSubscripeButtonActiv: _isSubscripeButtonActiv,
            isSubscriped: false,
            subscripeTagName: '',
            bookmarkArray: auth.bookmarks,
            vueRender: vueRender,
        };
    },
    methods: {
        updateHomeAboButton: function(content) {
            this.subscripeTagName = content;
            console.info( this.subscripeTagName);
            vueForceRender('key');
        },
        toggleEscapeSearchLink: function() {
            console.info('got called');
            this.isSearchActive = !this.isSearchActive;
            vueForceRender('key');
            console.info( this.isSearchActive);
        },
        list_messages: function() {
            messages();
        },
		goBackToDashboard: function() {
            _isSearchActiv = false;
            this.$emit('reset-searchtext','');
//			$("#escape-search-link").css("visibility", "hidden");
//			$("#subscribe-btn").css("visibility", "hidden");
            _isSubscripeButtonActiv = false;
			vueForceRender('key');
			vueForceRender('search');
		},
		changeSubscribtion: function(){
			var btnString = $("#btn-text").text();
			console.log(btnString);

			if(this.isSubscriped){
				this.subscripeTagName.replace(/deabonnieren/g, '') + "abonnieren";
				//console.log(btnString);
//				$("#btn-text").text(newBtnString);
			}else{
				this.subscripeTagName.replace(/abonnieren/g, '') + "deabonnieren";
				//console.log(newBtnString);
//				$("#btn-text").text(newBtnString);
			}
            this.isSubscriped = !this.isSubscriped;
            vueForceRender('key');
		}

    },
    mounted: function () {
        this.list_messages();
        //this.refresh_messages();
    }
};

function get_insert_message(id) {
    $.ajax({ url: "api/msg/id/"+id, method: "GET" }).done(function (msg) {
        Vue.set(_messages, id, msg);
    }).fail(function (e, f, g) {
        console.log("cannot load " + id + ".json: " + e + f + g);
    })
}