v-forとv-ifでリストレンダリング制御したいと思っていた俺がアホだった。

どもっす。チッスチッス。

いきなりなんすけど、Vue.jsつかっててこうしたいときあるじゃないすか

<tr v-for="object in objects" v-if="object.visible">
  <td>{{ object.name }}</td>
</tr>

これやりたかったんすよ。マジで。各行の変更を検知して行の表示/非表示きりかえたかったんすよね。
だからVueのコンポーネントで

Vue.extend({
  data: function() {
    return {
      object: {}
    }
  },
  methods: {
    hoge: function () {
      this.object = this.getNewObject()
    }
  }
})

みたいなことして object を更新しようとしたらなんかインタラクティブにぃ？バインドされないんだけどぉ？ってなってぇ~

結果

ちゃんとドキュメント読んだら書いてあった。

フィルタ/ソートされた結果の表示

時どき、私達は実際に変更するかまたは元のデータをリセットせずに配列フィルタリングやソートされたバージョンの配列を表示する必要があります。
これを達成するに2つのオプションがあります:

フィルタまたはソートされた配列を返す算出プロパティを作成する
組み込み filterBy そして orderBy されたフィルタを使用する
それは完全な JavaScript であるため、算出プロパティはあなたにより細かい制御と柔軟性を与えますが、
フィルタは共通ユースケースに対してより便利にすることができます。
配列フィルタの詳細な使用方法については、それらのドキュメントをチェックしてください。

それらのドキュメント をチェックしたところ パフォーマンス向上のために、常に検索スコープを制限するのはいいアイデアです。 って書いてあった。やったね。

というわけで...

<input type="text" v-model="search_word">
<tr v-for="object in objects | filterBy search_word in 'name'">
  <td>{{ object.name }}</td>
</tr>

ってやってあげたらいけた。

最高。

ちゃんとドキュメント嫁って話でした。