title: VueJS2 v-html with filter
body: <p>How to display raw html with filter?</p>
  
  <p>I have something like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>K.json = function( json ) {
      if( typeof json!='string' ) json = JSON.stringify( json, null, 2 );
      json = json.replace( /&lt;/g, '&amp;lt;' ).replace( /&gt;/g, '&amp;gt;' ); // replace(/&amp;/g, '&amp;amp;')
      var pattern = /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g;
      var html = json.replace( pattern, function( match ) {
          var cls = 'number';
          var suffix = '';
          if( /^"/.test( match ) ) {
              if( /:$/.test( match ) ) {
                  cls = 'key';
                  match = match.slice( 0, -1 );
                  suffix = ':'
              } else {
                  cls = 'string';
              }
          } else if( /true|false/.test( match ) ) {
              cls = 'boolean';
          } else if( /null/.test( match ) ) {
              cls = 'null';
          }
          return '&lt;span class="' + cls + '"&gt;' + match + '&lt;/span&gt;' + suffix;
      } );
      return html;
  };
  Vue.filter( 'json', K.json );
  </code></pre>
  
  <p>And use them something like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div v-html="thecolumn | json"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>It shows a warning and displayed incorrectly:</p>
  
  <pre><code>vue.js:523 [Vue warn]: Property or method "json" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
  </code></pre>
  
  <p>(found in root instance)</p>
  
  <p>I also tried solution from forum: <a href="https://laracasts.com/discuss/channels/vue/use-a-filter-custom-filter-in-v-html-property?page=1" rel="noreferrer">https://laracasts.com/discuss/channels/vue/use-a-filter-custom-filter-in-v-html-property?page=1</a></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;p v-html="this.$options.filters.json(description)"&gt;&lt;/p&gt;
  </code></pre>
  
  <p>It shows error:</p>
  
  <pre><code>[Vue warn]: Error when rendering root instance: 
  vue.js:3063 Uncaught TypeError: Cannot read property 'filters' of undefined
      at eval (eval at makeFunction (vue.js:8260), &lt;anonymous&gt;:2:2975)
      at Proxy.renderList (vue.js:3158)
      at Proxy.eval (eval at makeFunction (vue.js:8260), &lt;anonymous&gt;:2:2169)
      at Vue$3.Vue._render (vue.js:3054)
      at Vue$3.&lt;anonymous&gt; (vue.js:2430)
      at Watcher.get (vue.js:1661)
      at new Watcher (vue.js:1653)
      at Vue$3.Vue._mount (vue.js:2429)
      at Vue$3.$mount (vue.js:6000)
      at Vue$3.$mount (vue.js:8327)
  </code></pre>
  
  <p>What's the correct way to do this on VueJS2?</p>