title: Stencil component not rendering the updated tabs
body: <pre class="lang-js prettyprint-override"><code>import { Component, h, State } from '@stencil/core';
  // import '@webcomponents/custom-elements';
  import '@clr/core/icon/register';
  import { ClarityIcons, plusIcon } from '@clr/core/icon';
  
  ClarityIcons.addIcons(plusIcon);
  
  @Component({
    tag: 'tabs-component',
    styleUrl: 'tabs-component.css',
    shadow: false,
  })
  export class TabsComponent {
    @State() tabs: Array&lt;object&gt; = [
      (
        &lt;li role=&quot;presentation&quot; class=&quot;nav-item&quot;&gt;
          &lt;button id=&quot;tab3&quot; class=&quot;btn btn-link nav-link&quot; aria-controls=&quot;panel3&quot;
            aria-selected=&quot;false&quot; type=&quot;button&quot;&gt;Cloud&lt;/button&gt;
        &lt;/li&gt;
      )
    ];
  
    addTab(onHead = true) {
      // debugger
      const tab = (
        &lt;li role=&quot;presentation&quot; class=&quot;nav-item&quot;&gt;
          &lt;button id=&quot;tab3&quot; class=&quot;btn btn-link nav-link&quot; aria-controls=&quot;panel3&quot;
            aria-selected=&quot;false&quot; type=&quot;button&quot;&gt;Dashboard&lt;/button&gt;
        &lt;/li&gt;
      );
      if (onHead) {
        this.tabs.unshift(tab);
      } else {
        this.tabs.push(tab);
      }
      console.log(this.tabs);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;ul id=&quot;demoTabs&quot; class=&quot;nav&quot; role=&quot;tablist&quot;&gt;
            &lt;li role=&quot;presentation&quot; class=&quot;nav-item&quot; onClick={() =&gt; this.addTab()}&gt;
              &lt;cds-icon shape=&quot;plus&quot; class=&quot;cursor&quot;&gt;&lt;/cds-icon&gt;
            &lt;/li&gt;
            {this.tabs}
          &lt;/ul&gt;
          &lt;section id=&quot;panel1&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;tab1&quot;&gt;
            tab1
          &lt;/section&gt;
          &lt;section id=&quot;panel2&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;tab2&quot; aria-hidden=&quot;true&quot;&gt;
            tab2
          &lt;/section&gt;
          &lt;section id=&quot;panel3&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;tab3&quot; aria-hidden=&quot;true&quot;&gt;
            tab3
          &lt;/section&gt;
        &lt;/div&gt;
      );
    }
  
  }
  
  </code></pre>