title: VueJS functional components (SFC): how to encapsulate code?
body: <p>I wrote a simple template-substitution component in VueJS as a single-file component. It doesn't have many features: just one prop, and I also made a computed property to encapsulate some tricky transformations that are done to that prop before it can be used in the template. It looks something like the following:</p>
  
  <pre><code>&lt;template&gt;
    ...some-html-here...
      &lt;a :href="myHref"&gt;...&lt;/a&gt;
    ...
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'MyComponent',
      props: {
        href: { type: String, required: true },
      },
      computed: {
        myHref() {
          let result = this.href;
          // several lines of complicated logic making substitutions and stuff
          // ...
          return result;
        }
      }
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>Now I think this should really be a functional component, as it has no state, no data, no reactivity, and so lunking around a whole instance is wasteful.</p>
  
  <p>I can make this functional just by adding the 'functional' attribute to my <code>&lt;template&gt;</code>. In a functional component, of course, there are no such things as computed properties or methods or whatever. So my question is: where can I put my several lines of complicated logic? I don't want to have to embed this directly into my template, especially as it is used in multiple places. So where can I put code to transform my input props and make them ready to use in my template?</p>