app_vue2/components/Layout/Subheader.vue

<template>
  <main>
    <v-card
      class="d-none d-sm-none d-md-flex ot_light_grey text-body-2"
      flat
      tile
    >
      <LayoutSubHeaderBreadcrumbs class="mr-auto" />

      <v-card
        class="d-md-flex ot_super_light_grey pt-2 mr-6  align-baseline"
        flat
        tile
      >
        <LayoutSubHeaderActivityYear v-if="!showDateTimeRange" class="activity-year" />
        <LayoutSubHeaderDataTiming v-if="!showDateTimeRange" class="data-timing ml-2" />
        <LayoutSubHeaderDataTimingRange class="data-timing-range ml-n1" @showDateTimeRange="showDateTimeRange=$event" />
        <LayoutSubHeaderPersonnalizedList class="personalized-list ml-2" />
      </v-card>
    </v-card>
  </main>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from '@nuxtjs/composition-api'

export default defineComponent({
  setup () {
    const showDateTimeRange:Ref<boolean> = ref(false)
    return {
      showDateTimeRange
    }
  }
})
</script>

<style scoped>

</style>