material design components Tab Bar: "Cannot read property 'getBoundingClientRect' of null" when trying to re-initialize

Upon modifying the tab bar (via JS) it no longer works (no ripple, no indicator, no color change), so I tried re-initializing it (after all the modifications) with

mdc.tabBar.MDCTabBar.attachTo(document.querySelector('.mdc-tab-bar')

but that leads to an error in the title.

I've tried using autoInit to reinitialize

window.mdc.autoInit(document.querySelector('.mdc-top-app-bar--short-fixed-adjust'));

where mdc-top-app-bar--short-fixed-adjust is the parent element - but got the same error.

const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(
    document.querySelector('.mdc-top-app-bar')
);
const tabBar =  mdc.tabBar.MDCTabBar.attachTo(
    document.querySelector('.mdc-tab-bar')
);

tabBar.listen('MDCTabBar:activated', function (event) {

    const tabs = document.querySelectorAll('.mdc-tab');
    var tabList = document.querySelector('.mdc-tab-scroller__scroll-content');
    var content;
    var tableBody = document.querySelector('.mdl-data-table');
    var tab = tabs[event.detail.index];

    console.log(tab.children[0].children[1].textContent, 'tab activated');

    fetch(<json url>).then(function(response) {
        return response.json()
    }).then(function(json) {
        content = json;
        console.log(content.data.tableSchemas[0].name);
        const schemas = content.data.tableSchemas;
        const datas = content.data.tableDatas;

        for (var i = 0, len = schemas.length; i < len; i++) {
            // tab panel
            // var cell = document.createElement('div');
            // cell.className = 'mdc-layout-grid__cell';
            var tabBtn = document.createElement('button');
            tabBtn.className = 'mdc-tab' + (!i ? ' mdc-tab--active' : '');
            tabBtn.setAttribute('role', 'tab');
            tabBtn.setAttribute('aria-selected', 'true');
            var tabCnt = document.createElement('span');
            tabCnt.className = 'mdc-tab__content';
            var tabIcn = document.createElement('span');
            tabIcn.className = 'mdc-tab__icon material-icons';
            tabIcn.textContent = 'favorite';
            var tabTxt = document.createElement('span');
            tabTxt.className = 'mdc-tab__text-label';
            tabTxt.textContent = schemas[i].name;
            var tabInd = document.createElement('span');
            tabInd.className = 'mdc-tab-indicator' + (!i 
                ? ' mdc-tab-indicator--active' 
                : ''
            );
            var tabIndCnt = document.createElement('span');
            tabIndCnt.className = 'mdc-tab-indicator__content';
            tabIndCnt.className += 'mdc-tab-indicator__content--underline';
            var tabRipple = document.createElement('span');
            tabRipple.className = 'mdc-tab__ripple';

            // cell.appendChild(tabBtn);
            tabBtn.appendChild(tabCnt);
            tabCnt.appendChild(tabIcn);
            tabCnt.appendChild(tabTxt);
            tabBtn.appendChild(tabInd);
            tabInd.appendChild(tabIndCnt);
            tabBtn.appendChild(tabRipple);
            tabList.appendChild(tabBtn);
        }

        // window.mdc.autoInit(document.querySelector('#suk'));
        mdc.tabBar.MDCTabBar.attachTo(document.querySelector('.mdc-tab-bar'));
        // console.log(tabBar);
    });

    while (tableBody.firstChild) {
        tableBody.removeChild(tableBody.firstChild);
    }

    while (tabList.firstChild) {
        tabList.removeChild(tabList.firstChild);
    }

    // mdc.tabBar.MDCTabBar.attachTo(document.querySelector('.mdc-tab-bar'));

});

I expect tabs to keep working after I modofied them (the resultant structure is correct and identical to the original one).

Actual result:

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at Object.computeContentClientRect (component.ts:55)
    at e.computeContentClientRect (foundation.ts:54)
    at e.computeContentClientRect (component.ts:46)
    at e.computeIndicatorClientRect (component.ts:135)
    at Object.getTabIndicatorClientRectAtIndex (component.ts:105)
    at e.activateTab (foundation.ts:103)
    at Object.setActiveTab (component.ts:101)
    at e.handleTabInteraction (foundation.ts:150)
    at HTMLDivElement.handleTabInteraction_ (component.ts:65)
    at e.t.emit (component.ts:115)