title: Return a component's output as part of a method's HTML response in Vue.js
body: <p>I'm using <a href="http://materialdesignicons.com" rel="nofollow noreferrer">Material Design's Vue component icon set</a>. I'd like to process a string to include an icon in the middle. </p>
  
  <p><strong>Input</strong> (a string I can't control):</p>
  
  <blockquote>
    <p>"I want an icon to go there"</p>
  </blockquote>
  
  <p><strong>Desired output</strong>:</p>
  
  <blockquote>
    <p>"I want an <code>&lt;timer-icon&gt;&lt;/timer-icon&gt;</code> to go there"</p>
  </blockquote>
  
  <p>I'm trying to do this using a <code>method</code> that processes the text. But how can I get my icon component in there? </p>
  
  <p>I've tried this:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;span&gt;{{ insertIcon(myString) }}&lt;/span&gt;
  &lt;/template&gt;
  
  import TimerIcon from 'vue-material-design-icons/Timer.vue'
  
  export default {
     data () {
        return {
          myString: fromAnotherPlugin // "I want an icon to go there"
        }
     },
     components: {
        TimerIcon
     },
     methods: {
        insertIcon: function (string) {
           return string.replace('icon', TimerIcon)
        }
     }
  }
  </code></pre>
  
  <p>But it returns <code>[object Object]</code> in place of "icon."</p>
  
  <p>I've also tried referencing the component as HTML.</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;span&gt;{{ insertIcon(myString) }}&lt;/span&gt;
  &lt;/template&gt;
  
  import TimerIcon from 'vue-material-design-icons/Timer.vue'
  
  export default {
     data () {
        return {
            myString: fromAnotherPlugin // "I want an icon to go there"
        }
     },
     components: {
        TimerIcon
     },
     methods: {
        insertIcon: function (string) {
           return string.replace('icon', '&lt;TimerIcon&gt;&lt;/TimerIcon&gt;')
        }
     }
  }
  </code></pre>
  
  <p>But it comes back empty.</p>