Vue komponent renderad av v-for uppdateras inte när array gör det

Låter som du kanske deklarerar data fel?

Se till att data faktiskt returnerar korrekt enligt:

data() {
  return {
    arrayName: []
  }
}

ändras datan i arrayName nu så kommer det garanterat vara reaktivt.

<template>
    ...
        <tr v-for="(item, index) in purchases" :key="index" :index="index">
          <td>{{index + 1 + '.'}}</td>
          <td>{{item.entries[0].payee}}</td>
          <td><img src="../assets/städning.png" alt="Generisk Bild"></td>
          <td>{{'1'}}</td>
          <td>{{item.entries[0].quant}}</td>
          <td>{{item.entries[0].quant}}</td>
          <td className="green">{{item.state}}</td>
          <td  className="red">Ladda ner faktura</td>
        </tr>
    ...
</template>
<script>
import { asyncFunc1, asyncsFunc2 } from ...

export default {
  data () {
    const arrayName = []
    asyncFunc1()
      .then(res => {
        Object.keys(res).forEach(function (key) {
          asyncFunc2()(res[key])
            .then(res => {
              arrayName.push(res)
            })
        })
        console.log(arrayName)
      })

    return {
      arrayName: arrayName
    }
  }
}
</script>

Data ska returera ett object med ditt state, du ska inte göra direkta anrop i data.
Du vill definera dina metoder i methods och anropa dem i dina life-cycle methods, t.ex. created.

Key är ett unikt ID som används av Vue i sin virtual DOM för att veta vad exakt som behöver renderas om. Vue kan räkna ut detta själv, men det tar mer prestanda om du jobbar med stora datamängder. Så se det som ett index som gör att Vue endast behöver rendera om objektet på plats 251 i din array istället för att räkna ut det själv först.

Här är ett exempel på ett async anrop som hämtar todos via ett api och sätter state i data.

<template>
  <div id="app">
    <ul v-if="todos.length">
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      todos: [],
    };
  },
  async created() {
    await this.fetchTodos();
  },
  methods: {
    fetchTodos: async function (todo) {
      const res = await fetch("https://jsonplaceholder.typicode.com/todos");
      const data = await res.json();
      this.todos = data;
    },
  },
};
</script>

Det jag postade fungerar om du kör det med en JsFiddle. Så problemet är snarare i någon av metoderna du importerar och inte visar. Magkänslan säger att något körs i async men inte inväntas, eller att state inte uppdateras korrekt. Hur ser koden ut efter att du ändrat till ovan nämna implementation?

Har du debuggat koden med debuggern i VSCode?

Du kan också installera VueJs extension till Google Chrome om du inte redan har den. Där kan du gå in i en komponent och kika på state.
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdo...

Edit:
Kan tillägga att metoden du använder .forEach inte stödjer async.
https://gist.github.com/joeytwiddle/37d2085425c049629b80956d3...

Svårt utan att se exakt vad koden i metoderna du anropar gör, men det ser ut som att du göra asynkrona anrop i en loop, vilket blir o(n) och kan sänka prestandan rätt rejält beroende på mängden anrop du gör.
Du bör också få enormt många re-renders om du uppdaterar state i en loop. Jag rekommenderar att du hämtar ut allt och sen sätter hela arrayn en gång för att trigga en re-render.

Du skulle kunna börja med att debugga första delen av anropet och sedan applicera nästa.
Kika om du får en korrekt console log från asyncFunc1.

import { asyncFunc1, asyncsFunc2 } from ...

export default {
  data() {
    return {
      arrayName: [],
    };
  },
   async created() {
        const res = await asyncFunc1();
        console.log(res);
   }
}