CKEditor 5 nested elements not downcasting properly

Question

I have the following series of nested plugins/elements that are used for creating documents/emails: MultiRow > Row > Cell

I have attributes at the Row level that are edited through a UI that is based on the user's selection.

When row attributes are edited outside of the multi row (the row is just in the root), they work great and the view updates immediately.

However when they're inside the multi-row, the view only updates on page refresh

I have spent hours and hours troubleshooting this and as far as i can tell the Multi-row > Row relationship is setup the same way the Row > Cell relationship is (this relationship works great).

Multirow schema:

_defineSchema() {
const schema = this.editor.model.schema;

        schema.register('templateMultiRow', {
            isObject: true,
            allowIn: ['$root' ],
            allowAttributes: ['borderwidth', 'bordercolor', 'paddingtop', 'paddingbottom', 'uid'],
            allowChildren: ['templateRow']
        });
    }

row schema:

_defineSchema() {
const schema = this.editor.model.schema;

        schema.register('templateRow', {
            isObject: true,
            allowIn: ['$root', 'templateMultiRow' ],
            allowAttributes: ['rowstyle', 'paddingtop', 'paddingbottom', 'margintop',  'marginbottom', 'presetsize', 'uid'],
            allowChildren: ['cellInRow']
        });
    }

row downcast:

const getTemplateRowView = (asWidget) => (modelElement, { writer: viewWriter }) => {
            const section = viewWriter.createContainerElement('div',
                {
                    rowstyle: modelElement.getAttribute('rowstyle') || '',
                    paddingtop: modelElement.getAttribute('paddingtop') || '',
                    paddingbottom: modelElement.getAttribute('paddingbottom') || '',
                    margintop: modelElement.getAttribute('margintop') || '',
                    marginbottom: modelElement.getAttribute('marginbottom') || '',
                    presetsize: modelElement.getAttribute('presetsize') || '',
                    class: `ck-template-row ck-template-row-${modelElement.getAttribute('rowstyle') || ''} 
                    ck-template-row-pt-${modelElement.getAttribute('paddingtop') || ''}
                    ck-template-row-pb-${modelElement.getAttribute('paddingbottom') || ''}
                    ck-template-row-presetsize-${modelElement.getAttribute('presetsize')}`,
                    style: `margin-top: ${modelElement.getAttribute('margintop') || ''}; margin-bottom: ${modelElement.getAttribute('marginbottom') || ''};`,
                    uid: modelElement.getAttribute('uid') || self.crypto.randomUUID()
                },
                [viewWriter.createSlot()]
            );

            return asWidget
                ? toWidget(section, viewWriter, { label: 'Layout' })
                : section;
        };

        conversion.for('dataDowncast').elementToStructure({
            model: {
                name: 'templateRow',
                attributes: ['rowstyle', 'paddingtop', 'paddingbottom', 'margintop', 'marginbottom', 'presetsize', 'uid']
            },
            view: getTemplateRowView(false)
        });
        conversion.for('editingDowncast').elementToStructure({
            model: {
                name: 'templateRow',
                attributes: ['rowstyle', 'paddingtop', 'paddingbottom', 'margintop', 'marginbottom', 'presetsize', 'uid']
            },
            view: getTemplateRowView(true)
        });

so for example if i update the "presetsize" attribute on the row OUTSIDE of the multirow, it updates and shows the changes in the view. Inside of the multirow it does not until page refresh