title: Render html using filter
body: <p>I need to write a filter which renders html tags. 
  This is my filter:</p>
  
  <pre><code>filters: {
    limitStrLength: function (value, maxLength) {
      if (value &amp;&amp; value.length &gt; maxLength) {
        let partialVal = value.substr(0, maxLength) + "...";
        return "&lt;span title='" + value + "' &gt;" + partialVal + "&lt;/span&gt;";
      } else {
        return value;
      }
    }
  }
  </code></pre>
  
  <p>My problem is that I do not manage to render the raw html.</p>
  
  <p>If I simply do:</p>
  
  <pre><code>&lt;div&gt;{{ productName  | limitStrLength(6) }}&lt;/div&gt;
  </code></pre>
  
  <p>The html tags are rendered as string (i.e., I see on screen something like <code>&lt;span title=...</code>).</p>
  
  <p>I also tried using <code>v-html</code> attribute:</p>
  
  <pre><code>&lt;div v-html="productName | limitStrLength(6)"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But I get an error:</p>
  
  <blockquote>
    <p>Property or method "limitStrLength" is not defined on the instance but referenced during render.</p>
  </blockquote>
  
  <p>Any idea?</p>