app_vue2/components/Layout/ActivityYear.vue

<template>
  <main class="d-flex">
    <span class="mr-2 ot_dark_grey--text font-weight-bold">{{$t(label)}}</span>
    <UiXeditableText
      class="activity-year-input"
      type="number"
      :data="activityYear"
      v-on:update="updateActivityYear">
      <template v-slot:xeditable.read="{inputValue}">
        <v-icon aria-hidden="false" class="ot_green--text" x-small>fas fa-edit</v-icon>
        <strong class="ot_green--text"> {{inputValue}} <span v-if="yearPlusOne">/ {{ parseInt(inputValue) + 1}}</span></strong>
      </template>
    </UiXeditableText>
  </main>
</template>

<script lang="ts">
  import {defineComponent, useContext} from '@nuxtjs/composition-api'
  import {$useActivityYearUpdater} from "~/use/updater/useActivityYearUpdater";
  import {$organizationProfile} from "~/services/profile/organizationProfile";
  import {$useDirtyForm} from "~/use/form/useDirtyForm";

  export default defineComponent({
    setup() {
      const {store, $dataPersister} = useContext()
      const {updater, activityYear} = $useActivityYearUpdater(store, $dataPersister)
      const {markFormAsNotDirty} = $useDirtyForm(store)

      const organizationProfile = $organizationProfile(store);

      let yearPlusOne = !organizationProfile.isManagerProduct()
      const label = organizationProfile.isSchool() ? 'schooling_year' : organizationProfile.isArtist() ? 'season_year' : 'cotisation_year'

      const updateActivityYear = async (newDate:number) =>{
        markFormAsNotDirty()
        await updater(newDate)
        console.log('1')
        setTimeout(()=>window.location.reload(), 0)
      }

      return {
        activityYear,
        label,
        yearPlusOne,
        updateActivityYear
      }
    }
  })
</script>

<style lang="scss">
  .activity-year-input{
    max-height: 20px;
    input{
      font-size: 14px;
      width: 55px !important;
    }
  }
</style>