title: How to render x-template using vue custom directives?
body: <p>I have an <code>angularjs</code> directive that I'm trying to replicate using <code>vuejs</code>:</p>
  
  <p>Twig (project tag it's the original angularjs code):</p>
  
  <pre><code>&lt;a class="animated fade-in-right" v-for="project in projects"&gt;
      &lt;project project-on-delete="onDelete" project-show-delete-action="true" project-allow-delete="project.ownerId == user.id" project-show-progress="true" project-show-status="true"&gt;&lt;/project&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Then in the actual directive.js, another twig template was called, like this:</p>
  
  <pre><code>return {
      restrict: 'E',
      scope: true,
      templateUrl: 'project.tpl.html',
  </code></pre>
  
  <p>That file is html inside a <code>script</code> tag, like this:</p>
  
  <pre><code>&lt;script type="text/ng-template" id="project.tpl.html"&gt;
    html
  &lt;/script&gt;
  </code></pre>
  
  <p>Now my question is how do I make the same, using the vue directive to render the <code>project.tpl.html</code> inside the <code>&lt;project&gt;</code>tag?</p>
  
  <p>In case it wasn't very specific, I want this to happen:</p>
  
  <pre><code>&lt;project&gt;
    project.tpl.html
  &lt;/project&gt;
  </code></pre>