Keeping copies of original object

[alex-dow]

I have an object I wish to edit, and the UI for doing so is split across many different components.

I wanted to simplify my life, so I created a store that all these components will use. I wanted to have both a mutable and immutable ref to the object being edited (eg, I don't want edited values in form elements to be used when displaying those values elsewhere on the screen until the user saves). So I did this:

const myStore = defineStore('my-store', () => {

    // One way
    const originalObject = ref<MyObject>();
    const myObject = computed(() => originalObject.value);

    // I think this is another way that works
    // const originalObject = ref<MyObject>();
    // const myObject = readonly(originalObject);
    
    const myObjectForm = ref<MyObject>();

    const loadMyObject = async () => {
        const res = axios.get('/my-object');
        originalObject.value = res.data;
        myObjectForm.value = res.data;
    }

    const saveMyObject = async () => {
        const res = axios.post('/my-object', myObjectForm.value);
        originalObject.value = res.data;
    }

    return { myObject, myObjectForm, loadMyObject, saveMyObject }

});

I want it this way, because the various form components that are used to edit myObject depend on having access to all values for validation purposes.

So I'd like to know if this is a sensible approach or if there is a better approach I can take.

thanks in advance