title: Why are the components not rerendering after Response?
body: <p><em><strong>Table with pinia store equipmentlist, fethced from usequipments but table does not rerender
  <strong>VueTableComponent</strong></strong></em></p>
  <pre><code>  &lt;script setup lang=&quot;ts&quot;&gt;
  import { useEquipmentStore } from '~/store/equipmentStore'
  import useEquipments from '~/composables/equipments'
  
  const { getEquipmentList } = useEquipments()
  onBeforeMount(() =&gt; { getEquipmentList() })
  
  const state = useEquipmentStore()
  const equipmentList: any = state.equipmentList
  const loaded = state.loaded
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;el-table :key=&quot;loaded&quot; :data=&quot;equipmentList&quot; style=&quot;width: 100%&quot;&gt;
      &lt;el-table-column type=&quot;expand&quot;&gt;
        &lt;template #default=&quot;props&quot;&gt;
          ID: {{ props.row.id }}
        &lt;/template&gt;
      &lt;/el-table-column&gt;
      &lt;el-table-column label=&quot;ID&quot; prop=&quot;id&quot; /&gt;
      &lt;el-table-column label=&quot;Name&quot; prop=&quot;name&quot; /&gt;
    &lt;/el-table&gt;
  &lt;/template&gt;
  </code></pre>
  <p><strong>Typescript File for all CRUD Operations equipment.ts</strong></p>
  <pre><code>import { useRouter } from 'vue-router'
  import http from '../http-common'
  import { useEquipmentStore } from '~/store/equipmentStore'
  
  export default function useEquipments() {
    const state = useEquipmentStore()
    const errors = ref([]) // array of strings
    const router = useRouter()
    const getEquipmentList = async() =&gt; {
      try {
        console.log(state.equipmentList.length)
        const response = await http.get('/equipment/list')
        state.equipmentList = response.data
        console.log(state.equipmentList.length)
        console.log(state.equipmentList[0])
      }
      catch (error: any) {
        console.log(error.message)
      }
    }
  </code></pre>
  <p><strong>Equipment(Pinia)Store</strong></p>
  <pre><code>import { defineStore } from 'pinia'
  import type { Ref } from 'vue'
  
  export const useEquipmentStore = defineStore('equipment', {
    state: () =&gt; ({
      equipment: ref({}) as any,
      equipmentList: ref([]) as Ref&lt;any[]&gt;,
    }),
    actions: {
      reset() {
        this.equipment = {}
        this.equipmentList = []
      },
    },
  })
  </code></pre>
  <p><a href="https://i.stack.imgur.com/dvGKH.png" rel="nofollow noreferrer">1. i called several times getEquipment list and it is faster done then i stored an initial equipment, 2. i clicked on the link on the left and fetched several times more and as u can see there is something fetchd but not displayed, 3. after repeating to home and again to Link the component is there and alll other next fetches do indeed function well</a></p>
  <p><strong>Main.ts</strong></p>
  <pre><code>  app.component('InputText', InputText)
      app.mount('#app')
      useEquipments().initDB()
    }
  </code></pre>
  <p><strong>same fetching class equipment.ts</strong></p>
  <pre><code>  const initDB = () =&gt; {
      try {
        if (state.equipmentList.length === 0) { storeEquipment({ id: 1, name: 'Firma' }) }
        else {
          for (const equipment of state.equipmentList) {
            console.log(equipment)
            if (equipment === 'Firma')
              state.equipmentList.splice(state.equipmentList.indexOf(equipment), 1)
          }
        }
      }
      catch (error: any) {
        console.log(error.message)
      }
    }
  </code></pre>