title: How to define a reusable function in vue component namespace
body: <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>