title: Instantiating Vue components using only string
body: <p>I have a string saved as a variable in javascript that contains both the <code>&lt;template&gt;</code> and <code>&lt;script&gt;</code> tags that could be saved into single file components in vue. Here is an example:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div&gt;
          {{myVar}}
          &lt;button @click = &quot;change(1)&quot;&gt;Increment&lt;/button&gt;
          &lt;button @click = &quot;change(-1)&quot;&gt;Decrement&lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default{
      data(){
          var randomVar = Math.round(10*Math.random());
          return {
              myVar: randomVar
          }
      },
      mounted(){
          this.change(12);
      },
      methods:{
          change(num){
              this.myVar += num;
          }
      }
  };
  &lt;/script&gt;
  </code></pre>
  <p>Is there a way to instantiate said string as a vue component without having to save it as a single file component or separating the data, methods and other lifecycle hooks?</p>