title: vuejs dynamic component throw error for v-bind:is, error is Property or method ... is not defined on the instance but referenced during render
body: <p>Code in the file:</p>
  
  <pre><code>&lt;template&gt;
    &lt;component v-bind:is="bbc"&gt;&lt;/component&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import bbc from './bbc.vue';
  
    export default {
      name: 'ShowRoom2',
    };
  &lt;/script&gt;
  </code></pre>
  
  <p><code>./bbc.vue</code></p>
  
  <pre><code>&lt;script&gt;
    export default {
      name: 'bbc',
      props: {
        msg: String,
      },
      mounted() {
        console.log('bbc is mounted');
      },
      render() {
        if (this.func) this.func();
        return (
          &lt;div class="bbcMyClass"&gt;
            &lt;h1&gt;bbc: &lt;span&gt;Pal&lt;/span&gt; &lt;span&gt;{this.msg}&lt;/span&gt;&lt;/h1&gt;
          &lt;/div&gt;
        )
      }
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>To reproduce</p>
  
  <ol>
  <li>git clone git@github.com:adamchenwei/vue-hoc-playground.git</li>
  <li>go to <code>src/components/ShowRoom2.vue</code></li>
  <li>yarn install &amp;&amp; yarn serve</li>
  <li>observe error in the local browser</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/9R5MX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9R5MX.png" alt="enter image description here"></a></p>