Persistencia del modelo

Si están usando la sintaxis de <script setup> deben usar la función onMounted importandola desde ‘vue’. Quedaría algo así:

import { computed, onMounted, ref } from "vue";
...
...
...
onMounted(() => {
  const movementsFromLocalStorage = localStorage.getItem("movements");
  if (movementsFromLocalStorage) {
    movements.value = JSON.parse(movementsFromLocalStorage)?.map(
      (movement: any) => ({
        ...movement,
        time: new Date(movement.time),
      })
    );
  }
});

Seria bueno que den un ejemplo de como consumir los datos de una api o como conectar con una base de datos externas.

Me gusta usar el doble || (pipe) para asignar un valor por default en caso de que no se obtenga nada del localstorage.

 mounted() {
    const movements = JSON.parse(localStorage.getItem("movements")) || [];
    this.movements = movements.map((m) => ({ ...m, time: new Date(m.time) }));
  },

Si quieren solucionar el monto negativo que no se dibujaba correctamente en el gráfico al final del video, solo deben corregir la función amounts() del Home.vue:

amounts() {
  const lastDays = this.movements.filter((x) => {
      const today = new Date();
      const oldDate = today.setDate(today.getDate() - 30);

      return x.time > oldDate;
    })
    .map((y) => y.amount);

  return lastDays.map((x, i) => {
    const lastMovements = lastDays.slice(0, i);

    return (
      x +
      lastMovements.reduce((suma, movement) => {
        return suma + movement;
      }, 0)
    );
  });
},

Esta sección calcula la suma de los movimientos anteriores:

lastMovements.reduce((suma, movement) => {
  return suma + movement;
}, 0)

Pero estaba faltando sumar el movimiento actual (x):

return (
  x +
  lastMovements.reduce((suma, movement) => {
    return suma + movement;
  }, 0)
);

el problema de la grafica se debe al largo del array de amounts que toma al principio.
Debería ser ===> amounts.value.length - 1
Luego en const x modifical la multiplicada quitarle el “* i + 1”

Les dejo el codigo abajo.

OJO que yo tengo 330 de largo en Pixeles en la clase creo fue siempre de 300 ! ! ! !

const points = computed(() => {
    const total = amounts.value.length - 1;
    return amounts.value.reduce((points, amount, i) => {
        // 330 is the total pixel width
        const x = (330 / total) * i;
        console.log(total, i);
        const y = amountToPixels(amount);
        console.log("x , y  ==> ", x, y);
        return `${points} ${x},${y}`;
    },"");
});