How to define a reusable function in vue component namespace
<p>here is my code:</p>

<pre><code>Vue.component("ro-webview", {
  props: ["src"],
  template: `&lt;div&gt;
&lt;div&gt;
&lt;div class="col-md-2 list-inline"&gt;
${this.getIcon("fa-arrow-left")}
${this.getIcon("fa-arrow-right")}
${this.getIcon("fa-refresh")}
&lt;/div&gt;
&lt;input class="col-md-10" :value="src"/&gt;
&lt;/div&gt;
&lt;iframe class="col-md-12" :src="src"/&gt;
&lt;/div&gt;`,

  data: {
    getIcon: function (iconName) {
      return `&lt;a class="btn btn-default" href="javascript:void(0)"&gt;&lt;i class="fa ${iconName}" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;`
    }
  }
})
</code></pre>

<p>chrome console raise </p>

<pre><code>Uncaught TypeError: this.getIcon is not a function
  (anonymous function)
</code></pre>

<p>define getIcon will cause name conflict, so how to define getIcon and make it only work in my component?</p>