traxxx/assets/components/home/home.vue

<template>
    <div class="content">
        <FilterBar :fetch-releases="fetchReleases" />

        <div class="content-inner">
            <Releases :releases="releases" />
        </div>
    </div>
</template>

<script>
import FilterBar from '../header/filter-bar.vue';
import Releases from '../releases/releases.vue';

async function fetchReleases() {
    this.releases = await this.$store.dispatch('fetchReleases', { limit: 20 });
    this.$store.commit('setCache', {
        target: 'home',
        releases: this.releases,
    });
}

async function mounted() {
    this.pageTitle = '';

    await this.fetchReleases();
}

function updated() {
    if (this.from.name === 'scene' && this.from.hash === '#home') {
        const releaseTile = document.querySelector(`#scene-${this.from.params.releaseId}`);
        if (releaseTile) releaseTile.scrollIntoView();
    }
}

export default {
    components: {
        FilterBar,
        Releases,
    },
    data() {
        return {
            // releases: this.$store.state.releases.cache.home || [], // slows down apparent page load
            releases: [],
            networks: [],
            pageTitle: null,
            from: null,
        };
    },
    beforeRouteEnter(to, from, next) {
        next(vm => vm.$set(vm, 'from', from));
    },
    updated,
    mounted,
    methods: {
        fetchReleases,
    },
};
</script>