om/public/routes/home.js

const HomeRouter = {
    template: `
<div>
<div id="om-msg-cards" class="column pull-right-sm is-four-fifths-desktop">
	<a id="escape-search-link"  @click="goBackToDashboard">< zurück zu allen Einträgen</a>
	<b-button id="subscribe-btn"  type="is-primary" @click="changeSubscribtion"><div id="btn-text"></div></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,
            bookmarkArray: auth.bookmarks,
        };
    },
    methods: {
        list_messages: function() {
            messages();
        },
		goBackToDashboard: function() {
			vueForceRender();
			$("#escape-search-link").css("visibility", "hidden");
			$("#subscribe-btn").css("visibility", "hidden");
		},
		changeSubscribtion: function(){
			var btnString = $("#btn-text").text();
			console.log(btnString);

			if($("#btn-text").hasClass("subscribed")){
				$("#btn-text").removeClass("subscribed");
				var newBtnString = btnString.replace(/deabonnieren/g, '') + "abonnieren";
				//console.log(btnString);
				$("#btn-text").text(newBtnString);
			}else{
				$("#btn-text").addClass("subscribed");
				var newBtnString = btnString.replace(/abonnieren/g, '') + "deabonnieren";
				//console.log(newBtnString);
				$("#btn-text").text(newBtnString);

			}
		}

    },
    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);
    })
}