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

Question

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 Reading docs at the link above looks like no js initialization is needed... What can be wrong and that can be tested/fixed ?

UPDATED BLOCK:

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?