title: JSX conditional render not updating based on state change
body: <p>I'm creating a JSX component with StencilJS and my component isn't re-rendering based on its state change. I have no idea why:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, Prop, State } from '@stencil/core'
  
  @Component({
    tag: "button-popover-group",
  })
  
  export class ButtonPopoverContainer{
    @State() showPopover:boolean = false;
    @Prop() popoverContent:JSX.Element;
  
    toggleShowPopover() {
      this.showPopover = !this.showPopover;
      console.log(this.showPopover);
    }
  
    render() {
      return (
        &lt;div class="rba-something"&gt;
          &lt;my-button onClick={this.toggleShowPopover}/&gt;
    
          {this.showPopover ? 
            &lt;my-popover&gt;
              {this.popoverContent}
            &lt;/my-popover&gt; : 
            null
          }
        &lt;/div&gt;
        
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>My console log statement verifies that the state is being changed, but for some reason my popover box is never visible</p>