Componente del historial

Lista de movimientos:

movements: [
        {
          id: 1,
          title: "Movimiento",
          description: "Deposito de salario",
          amount: "1000",
        },
        {
          id: 2,
          title: "Movimiento 1",
          description: "Deposito de honorarios",
          amount: "500",
        },
        {
          id: 3,
          title: "Movimiento 3",
          description: "Comida",
          amount: "-100",
        },
        {
          id: 4,
          title: "Movimiento 4",
          description: "Colegiatura",
          amount: "1000",
        },
        {
          id: 5,
          title: "Movimiento 5",
          description: "Reparación equipo",
          amount: "1000",
        },
      ],

Estilos de Movements/Index.vue

<style scoped>
.movements {
  max-height: 100%;
  padding: 0 8px;
  margin-bottom: 14px;
}
.title {
  margin: 8px 16px 24px 16px;
  color: var(--brand-blue);
}
.content {
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: scroll;
}
</style>

Los props de los componentes ya son reactivos, si el valor es actualizado (En los componentes que lo envian como parametro) se vera reflejado en todos los componentes que lo reciban (Pero, no pueden ser reasignados en el mismo compoente). Es redundante colocar los props con toRefs solo para usarlos en el template. Y al usar composition API los props declarados estan por defecto disponibles en el template como por ejemplo en el Movement.vue

<template>
	<!-- Aqui igualmente se puede usar title  -->
	<!-- porque vue se encarga de enviar los props al template -->
	<div class="movement">{{ title }}</div>
</template>

<script setup>
import { defineProps } from 'vue';

// No es necesario asignar los props a una variable
// a menos de que se vayan a utilizar en otra funcion
defineProps({
	title: {
		type: String,
	}
});
// Esto tampoco sería necesario
// const { title } = toRefs(props);
</script>

Estilos de Movements :

<style scoped>
.movements {
max-height: 100%;
padding: 0 8px;
margin-bottom: 14px;
}
.title {
margin: 8px 16px 24px 16px;
color: var(–brand-blue);
}
.content {
max-height: 68vh;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: scroll;
}
</style>

¿Qué es reactividad? Reactividad es cuando la vista de la aplicación cambia cuando los valores reactivos dentro de estas cambian su valor

No hagas manualmente los cambios de ID

Les recomiendo esta extención de VSCode para actualizar rapidamente los ids de los objetos de movements solo con un comando

link = Increment Selection

por ahora vamos piola.

Aún no logro entender bien el tema de ToRefs.