app_vue2/components/Layout/DataTiming.vue

<template>
  <main class="d-flex align-baseline">

    <span class="mr-2 ot_dark_grey--text font-weight-bold">{{$t('display_data')}} : </span>

    <v-btn-toggle
      v-model="timeChoice"
      dense
      class="ot_light_grey toggle-btn"
      active-class="ot_green ot_white--text"
      multiple
    >
      <v-btn max-height="25" class="font-weight-normal text-caption">
        {{$t('past')}}
      </v-btn>

      <v-btn max-height="25" class="font-weight-normal text-caption">
        {{$t('present')}}
      </v-btn>

      <v-btn max-height="25" class="font-weight-normal text-caption">
        {{$t('future')}}
      </v-btn>

    </v-btn-toggle>

  </main>
</template>

<script lang="ts">
  import {defineComponent, onUnmounted, ref, useContext, watch, Ref} from '@nuxtjs/composition-api'
  import {$useDirtyForm} from "~/use/form/useDirtyForm";
  import {$useMyProfileUpdater} from "~/use/updater/useMyProfileUpdater";
  import {WatchStopHandle} from "@vue/composition-api";

  export default defineComponent({
    setup() {
      const {store, $dataPersister} = useContext()
      const {markFormAsNotDirty} = $useDirtyForm(store)
      const {updateMyProfile, setHistorical, historical} = $useMyProfileUpdater(store, $dataPersister)

      const timeChoice:Ref<Array<number>> = ref(Array<number>())

      const historicalArray:Array<string> = ['past', 'present', 'future']
      for(const key in historicalArray){
        if (historical.value[historicalArray[key]])
          timeChoice.value.push(parseInt(key))
      }

      const unwatch:WatchStopHandle = watch(timeChoice, async (newValue) => {
        const historicalChoice:Array<string> = []
        for(const key in newValue){
          historicalChoice.push(historicalArray[newValue[key]])
        }

        setHistorical(historicalChoice)
        markFormAsNotDirty()
        await updateMyProfile()
        window.location.reload()
      })

      onUnmounted(()=>{
        unwatch()
      })

      return {
        timeChoice
      }
    }
  })
</script>

<style scoped lang="scss">
  .toggle-btn{
    z-index: 1;
    border-radius: 4px 0px 0px 4px;
  }
</style>