Vue | Элементы v-for не перерисовываются при изменении массива

Есть сайдбар с секциями, при выборе магазина загружаются секции и отображаются в сайдбаре (через dispatch->ajax). Все работает, но если я выбираю нужный мне магазин второй раз, то массив секций у компонента сайдбара меняется, но сами секции (они являются отдельными компонентами и рисуются через v-for не меняются).

Код сайдбара:

<div @click.self="hide()" class="shops-bar-wrapper">
<div class="shops-bar">
  <div class="hood" @click = 'logSections()'>
    <img
      :src="$store.state.shops.current.image"
      v-if="$store.state.shops.current.image"
      class="logo"
    />
    <img
      v-else
      src="@/assets/images/services/placeholder.png"
      class="logo"
    />
    <div class="name">{{ currentShopName }}</div>
  </div>
  <div class="content">
    <div
      @mouseleave="hideSubsections()"
      class="shops-bar-sections sections"
    >
      <ShopsBarSection
        :section="section"
        :key="index"
        v-for="(section, index) in this.$store.state.shops.current.sections"
      />
    </div>
    <div
      @mouseleave="hideSubsections()"
      @mouseenter="staySubsections()"
      class="shops-bar-subsections subsections dn"
    ></div>
  </div>
</div>

Скрипты сайдбарa:

methods: {
logSections()
{
  console.log(this.sections);
},
hide() {
  document.querySelector(".shops-bar-wrapper").classList.remove("showed");
},
hideSubsections() {
  document.querySelector(".shops-bar-subsections").classList.add("dn");
},
staySubsections() {
  document.querySelector(".shops-bar-subsections").classList.remove("dn");
},

}}

computed: {
currentShopName() {
  if (
    this.$store.state.shops?.current?.name &&
    this.$store.state.shops.current.name.length > 0
  ) {
    return this.$store.state.shops.current.name;
  } else {
    return "...";
  }
},
sections(){
  return this.$store.state.shops.current.sections;
  // return this.$store.getter.getCurrentSections;
}

Хранилище:

export const state = () => ({
list: [],
current: {}

}); export const mutations = {

setCurrent(state, shop) {
    shop.sections = [];
    console.log('Setting current');
    Vue.set(state, "current", shop);
    this.$auth.$storage.setUniversal('currentShop', shop);
},
setCurrentSections(state, sections) {
    let toReturnSections = [];
    for(let index = 0; index<sections.length; index++)
    {
        let section = sections[index];
        if(!section.parent_id){
            section.subsections = [];
            toReturnSections.push(section);
        }
    }
    for(let index = 0; index<sections.length; index++)
    {
        let section = sections[index];
        if(section.parent_id>0){
           toReturnSections.forEach(elem=>{
               if(elem.id == section.parent_id)
               {
                   elem.subsections.push(section);
               }
           })
        }
    }
    console.log('Setting current sections');
    Vue.set(state.current, "sections", toReturnSections);
    this.$auth.$storage.setUniversal('currentShop',state.current);
}

};

export const actions = {

async sectionsInShop(state, id, page = 1, limit = 1000) {
    this.$axios.get('http://127.0.0.1:8000/api/section/shop/'+id, {
        params: {
            'page': page,
            'limit': limit
        },
        progress: false,
    }).then((response)=>{
        if(response?.data?.success)
        {
            state.commit('setCurrentSections', response.data.sections.data);
        }
    }).catch((error)=>{
        // !!! Как обработать ошибку при получении секций
    })
},
async setCurrentAndGetSections(state, shop) {
    state.commit('setCurrent', shop);
    state.dispatch('sectionsInShop', shop.id);
}

}