Forma correcta de editar datos de un array de objetos

Hola, tengo una duda sobre el manejo de los datos en los componentes hijos.
si tengo un array del siguiente tipo:
data() {
return {
tabs: [
{ id: 1, name: “ELEM1”, active: true, order: 1 },
{ id: 2, name: “ELEM2”, active: false, order: 0 }
]
};
}
esos datos son pasados a un componente hijo por un prop. En el componente hijo hago un v-for y dentro existen inputs que modifican el nombre. No se puede usar v-model porque en realidad modificaría la prop y eso no es correcto. Cual es la mejor forma de gestionar estos casos?
Imaginad que los datos no quiero que se modifiquen hasta que se haga click en un guardar, con lo que emitir los cambios en el input no valdrían.
Incluso imaginemos que, desde el hijo quisiera añadir o quitar elementos de ese array… pero no se “guardan” en tabs hasta que no haga click en guardar. De ese modo un “cancelar” debería dejar todo intacto.
Muchas gracias!!!

Cualquier modificación en el arreglo debería hacerse en el componente padre.

Desde el componente hijo simplemente haces un emit con la información necesaria para modificar el arreglo.

Si creas un demo en codesandbox, codepen, etc quizá podría ser más fácil darte una mano.

Saludos.