Why content of coreui.io navs-tabs is not changed clicking on header?

[sergeynilov]

In laravel 8/jquery 3.6 / @coreui/coreui 3.4.0 app I need to add tab on my form - I opened the page https://coreui.io/docs/components/navs-tabs/
and copypasted tab code

            <nav id="editor_tab">
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-home-tab" data-coreui-toggle="tab" data-coreui-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
                    <button class="nav-link" id="nav-profile-tab" data-coreui-toggle="tab" data-coreui-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
                    <button class="nav-link" id="nav-contact-tab" data-coreui-toggle="tab" data-coreui-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">Tab 1...</div>
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">Tab 2</div>
                <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">Tab 3</div>
            </div>

I changed content of tabs like : “Tab 1...” - to see which tab is now opened.

But clicking on header of any tab content is not changed: https://prnt.sc/_70HzmoWLFk6

Looking at methods at page https://coreui.io/docs/components/navs-tabs/#events I see example :

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new coreui.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

I remade my html and javascript code :

                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-coreui-toggle="tab" data-coreui-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="profile-tab" data-coreui-toggle="tab" data-coreui-target="#tabContentProfile" type="button" role="tab" aria-controls="tabContentProfile" aria-selected="false">Profile</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="messages-tab" data-coreui-toggle="tab" data-coreui-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="settings-tab" data-coreui-toggle="tab" data-coreui-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
                    </li>
                </ul>

            <!-- Tab panes -->
            <div class="tab-content mb-lg-4">
                <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Tab 1a</div>
                <div class="tab-pane" id="tabContentProfile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Tab 2b</div>
                <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">Tab 3c</div>
                <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">Tab 4d</div>
            </div>

By default 1st tab is opened and I try by clicking on “Profile” tab to open “Tab 2b” content with id="tabContentProfile" :

    const triggerTabList = document.querySelectorAll('#myTab button')
    console.log('triggerTabList::')
    console.log(triggerTabList)

    triggerTabList.forEach(triggerEl => {
        const tabTrigger = new coreui.Tab(triggerEl)

        triggerEl.addEventListener('click', event => {
            console.log('tabTrigger::')
            console.log(tabTrigger.id)
            console.log(tabTrigger.name)
            console.log("tabTrigger._element::")
            console.log(tabTrigger._element)
            console.log(tabTrigger._element.id)
            console.log(tabTrigger._element.name)
            console.log(tabTrigger)

            event.preventDefault()
            tabTrigger.show()
            if( tabTrigger._element.id === 'profile-tab') {
                var tabContentName = 'tabContentProfile'
                var tabContentElement = document.getElementById(tabContentName)
                console.log('tabContentElement::')
                console.log(tabContentElement)
                tabContentElement.show()  // This like raise error
            }
        })
    })

But I got error :

Uncaught TypeError: tabContentElement.show is not a function
    at HTMLButtonElement.<anonymous> (admin.js?id=05fd01d501488b137e58:43600:27)

What I see in browser's console : https://prnt.sc/Xi2c4xguugp6
Tab header is selected, but not content area...
I suppose I need to convert tabContentElement element into coreui class, similar I made with method above :

new coreui.Tab(triggerEl)

But I did not find any similar method...

Not sure if that is correct way and why nav-tabs does not work by default without any JS code ?
Do I really need JS code in this case?