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.

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}`;
    },"");
});

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) }));
  },