Triggering from child to change the store does not updates the store

Parent File html

<div v-if="!refresh" class="c-focus-mode">
  <div class="c-focus-mode__container">
    <div class="c-focus-mode__container-left">
      <slide-card
        focus
        hideBottom
        :slideID="slideID"
        :index="orderIndex"
        :totalCount="5"
        :totalDuration="10"
        :isMobile="false"
      >
// Does not work (1)
      <template v-slot:prevSlideBtnLeft>
        <app-button
          v-if="!prevInvalid"
          type="circular"
          class="c-slide-card-preview__btn c-slide-card-preview__btn--prev"
          @click="goToSlide(-1)"
          ><app-icon name="chevron-left"></app-icon>
        </app-button>
      </template>
      <template v-slot:nextSlideBtnRight>
        <app-button
          v-if="!nextInvalid"
          type="circular"
          class="c-slide-card-preview__btn c-slide-card-preview__btn--next"
          @click="goToSlide(1)"
          ><app-icon name="chevron-right"></app-icon>
        </app-button>
      </template>
      </slide-card>
// Works below (2)
      <div
        class="c-focus-mode__container-left-navigation"
        :class="{['c-focus-mode__container-left-navigation--no-prev']: prevInvalid}"
      >
      <app-button
        v-if="!prevInvalid"
        type="circular"
        class="c-slide-card-preview__btn c-slide-card-preview__btn--prev"
        @click="goToSlide(-1)"
        ><app-icon name="chevron-left"></app-icon>
      </app-button>
      <app-button
        v-if="!nextInvalid"
        type="circular"
        class="c-slide-card-preview__btn c-slide-card-preview__btn--next"
        @click="goToSlide(1)"
        ><app-icon name="chevron-right"></app-icon>
      </app-button>
      </div>
    </div>
    <slide-card
      focus
      hideTop
      :slideID="slideID"
      :index="orderIndex"
      :totalCount="5"
      :totalDuration="10"
      :isMobile="false"
    >
    </slide-card>
  </div>
</div>

Functions called by the app-button components

  public goToSlide(increment) {
    const newIndex = this.orderIndex + increment;
    if (newIndex < 0 || newIndex >= this.deckSlides.length) {
      return;
    }
    this.setActiveSlide(newIndex);
  }

  private setActiveSlide(index) {
    this.slideIndex = index + 1;
    const { deckID, ID: slideID } = this.deckSlides[index];

    if (deckID && slideID) {
      this.$store.dispatch('deck/setActiveSlides', { deckID, slideID });
      history.replaceState({}, null, `/d/${this.deckID}/edit/focus/${index + 1}`);
    }
  }

When goToSlide is called from the buttons at "Works below (2)", store is updated successfully, but when the same function is called from the buttons at "Does not work (1)", store is not updated. The same thing happens when I try to emit an action from slide-card to trigger goToSlide function in the parent.