**Vue.js（+ TypeScript）**で、文字列に対して動的に$\style{background-color:yellow;}{ハイライト}$をかけたいと思った時に調べた内容です。

ちょっとググるとVueのフィルタで出来る！と見つかったのですが・・・

TL;DR

Vue.jsのフィルター機能は、(使い道によっては)普通のメソッドで書けるんじゃないの？

というお話です。
今回のようなハイライトかけたいような状況ではフィルター機能は使わなかったですね。

廃止するかどうかの熱い議論はこちら。
[Suggestion] Vue 2.0 - Bring back filters please

背景

まずはここ、こんな風にfiltersを定義できるんですねー。知見！
https://qiita.com/pokkur/items/e6c7b20852471a9eca29

で、それにに対して、TypeScript的に書こうとすると、

@Component({
  components: { MyForm, MyComponent },
  filters: {
    highlight(plainText: string, query: string): string {
      return plainText.replace(
        query,
        `<span style='background-color: yellow'>${query}</span>`
      );
    }
  }
})
export default class HogeHoge extends Vue {
  ...
}

と書けることがわかりました。
componentsに並列させて書くんですね。この辺り、ググってもあまり出てこない内容です。
　

が！！！
　

これって、もはやメソッドじゃん！

　
というツッコミが入ったのは、（zoomで4人くらいで）モブプログラミングをしていた時でした。
上のやつでも機能するんですが、普段使い慣れているメソッドでも書けることが分かり、書き直したものが次のコードになります。

highlight()の中身は全く同じですよね。

@Component({
  components: { MyForm, MyComponent }
})
export default class HogeHoge extends Vue {
  ...
  highlight(plainText: string, query: string): string {
    return plainText.replace(
      query,
      `<span style='background-color: yellow'>${query}</span>`
    );
  }
  ...
}

ということで、検索対象のテキスト（plainText）に、検索文字列（query）を渡したら部分的にstyleが当たって、ハイライトがかけられるようになりましたー。

実際に試すとすぐ分かるのですが、例えばqueryとして渡している変数がv-modelの変数だったら、レスポンシブにハイライト箇所が変わりますねー。

あとは、正規表現をうまく組み合わせることで、複数の同じ文字列に対してハイライトかけられました！
これでタスク終わり！

タスクも進み、新たな知見も得られて良い1日だった！

今回のタスクでVue.jsが初見殺しだと感じた内容

コード内で、Mustache記法（二重中括弧, {{ }}）と三重中括弧({{{ }}})がパッと見だと見分けづらい
フィルタでも書けるし、メソッドでも書ける
Vueのバージョンにより、三重中括弧がv-htmlに置き換わっていた（上では特に触れていない内容です）

#その他、参考文献

vuejsの{{{波括弧３つ}}}が効かなかった｜廃止されていた

（2重中括弧はMustache構文などでググりやすいですが、3重中括弧って特に呼び方はついていないんですかね？名前のないものって、ググりにくいですよね。）