Processed.vue

<template>

    <b-container fluid>
        <b-row class="justify-content-center">
            <b-card class="ml-3 mb-2">
                <b-card-sub-title><h5>Last dynamic spectrum</h5></b-card-sub-title>
                <b-card-body>
                    <a :href="last_dynspec">
                        <b-img-lazy fluid width="500px" v-bind:src="last_dynspec"></b-img-lazy>
                    </a>
                </b-card-body>

            </b-card>
            <b-card class="ml-3 mb-2">
                <b-card-sub-title><h5>Last 15 minutes dynamic spectrum</h5></b-card-sub-title>
                <b-card-body>
                    <a :href="last_hour_dynspec">
                        <b-img-lazy fluid width="500px" v-bind:src="last_hour_dynspec"></b-img-lazy>
                    </a>
                </b-card-body>

            </b-card>
        </b-row>
        <b-row>
            <TimeSelector class="float-left" @select-date="handleSelectDate"></TimeSelector>
            <BeamSelector class="float-right" @select-beam="handleSelectBeam"></BeamSelector>
        </b-row>
        <b-row class="mt-3 mb-3">

            <b-col class="float-left" v-if="selectedDate != null">Selected date is {{ selectedDate }}</b-col>
            <b-col class="float-right" v-if="selectedBeam != null">Selected beam is {{ selectedBeam }}</b-col>
        </b-row>
        <ProductsList v-bind:selectedDate="selectedDate" v-if='selectedDate != null'
                      v-bind:selectedBeam="selectedBeam"></ProductsList>
        <span v-if="selectedDate==null"><h2>Please select a date</h2></span>
    </b-container>
</template>

<script>
import TimeSelector from "./TimeSelector";
import ProductsList from "./ProductsList";
import BeamSelector from "./BeamSelector";

export default {
    name: "Processed",
    components: {
        TimeSelector,
        BeamSelector,
        ProductsList
    },
    data() {
        return {
            selectedDate: this.$route.params.date,
            selectedBeam: null,
            last_dynspec: "https://spaceweather.astron.nl/SolarKSP/data/livemonitor/IDOLS/last_dynspec.png",
            last_hour_dynspec: "https://spaceweather.astron.nl/SolarKSP/data/livemonitor/IDOLS/last_dynspec1H.png",


        }
    },
    created() {
        this.$watch(
            () => this.$route.params,
            (toParams, previousParams) => {
                console.log("HEY")
                console.log(toParams, previousParams, this.$route.params.date)
            }
        )
    },
    methods: {
        handleSelectDate(date) {
            this.selectedDate = date
        },
        handleSelectBeam(beam) {
            this.selectedBeam = beam
        }
    }
}
</script>

<style scoped>

</style>