title: StencilJS @Prop() variable is undefined
body: <p>I created a stencil component () that uses another stencil component () in the rendered template.</p>
  <p>One of the props (<strong>key: string</strong>) passed from <strong>smg-compound-filter</strong> to <strong>smg-filter</strong> is undefined, whereas the other props are well defined. I made sure that <strong>{filter.key}</strong> is defined in the template of <strong>smg-compound-filter</strong>, and i even tried to pass a literal string to <strong>smg-filter</strong>, but it's undefined in this component. I think i am missing something. If someone could give me an insight, it will be bery helpful.</p>
  <p><strong>smg-compound-filter.ts (render function)</strong></p>
  <pre><code>  render() {
      return (
          &lt;div class=&quot;smg-filter-container&quot;&gt;
  
              &lt;div class={`filters`}&gt;
                      this.filters.map(filter =&gt; {
                          return (
                              &lt;div class='filter'&gt;
                                  &lt;smg-filter
                                      key={filter.key} // even &quot;str&quot; doesn't work
                                      label={filter.label}
                                      target={filter.target}
                                      options={filter.options}
                                      customClasses='secondary'
                                      onFilterChanged={(event) =&gt; {this.toggleOption(event)}}
                                  &gt;
                                  &lt;/smg-filter&gt;
                              &lt;/div&gt;
                          );
                      })
              &lt;/div&gt;
          &lt;/div&gt;
      );
    }
  </code></pre>
  <p><strong>smg-filter.ts</strong></p>
  <pre><code>export class SmgFilter {
    @State() filter: Filter;
  
    @State() showOptions: boolean;
  
    /** custom classes to adapt style */
    @Prop() customClasses: string;
  
    /** smartsheet column linked to the filter */
    @Prop() key: string;
  
    /** label of the filter */
    @Prop() label: string;
  
    /** options */
    @Prop() options: FilterOption[];
  
    /** type of products to be filtered: 'master' or 'product' */
    @Prop() target: FilterTarget;
  
    @Event() filterChanged: EventEmitter&lt;Filter&gt;;
  
    componentWillLoad() {
      console.log(this.key); // undefined
  
      this.showOptions = !isSecondary ? true : false;
      this.filter = {
          key: this.key,
          target: this.target,
          label: this.label,
          options: this.options,
      };
    }
  </code></pre>