vue set型を使ったv-ifが反応しない

Question

v-ifを使ってテーブルの行の表示を切り替える処理を作っています。行毎に個別に表示をオンオフさせようとしています。

そこで以下のようなv-ifを作りました。seenは、配列で準備しました。これは正常に動作しました。

<tr v-for="rec in records">
        <td>{{rec.a}}</td>
        <td>{{rec.b}}</td>
        <td @dblclick="edit_me">
            {{rec.c}}
            <textarea v-if="seen.title.includes(rec.id)></textarea>
        </td>
    </tr>

seen:{
            code:[],title:[],date:[]
}

↓↓
関数呼び出し後に以下の処理
seen.title.push(id)

しかし複数行について並行的に処理をする場合があるので、配列ではなく、setと使いたいと考えました。そこで次のようにしたところ、表示の切り替えができなくなりました。
consoleで確認したところ、setへの値の追加は問題無くできています。

<tr v-for="rec in records">
        <td>{{rec.a}}</td>
        <td>{{rec.b}}</td>
        <td @dblclick="edit_me">
            {{rec.c}}
            <textarea v-if="seen.title.has(rec.id)"></textarea>
        </td>
    </tr>


seen:{
            code:new Set(),title:new Set(),date:new Set()
}

どこがまずいのでしょうか。
ご指導お願いします。

追記↓　setへのデータの追加部分。これをvueで呼び出しています。ほぼ生のコードなので、上のサンプルときちんと合わないところがあるかもしれません。　※複数のセルについて似たような処理をさせているので、clsの値を取得して分岐するように作っています。

var start_edit=function(event){
    var tage=$(event.target);
    var cls=td.attr("class").split(" ")[0];
    var document_id=tage.parents("tr").data("document_id");
    V.seen[cls].add(document_id);
}

Comments

[退会済みユーザー]

set版の方でseenに値を入れている処理を追記いただけますか？

[退会済みユーザー]

追記いたしました。確認お願いいたします。

Answer 1

多分ですが、VueはSet.add()によるプロパティ追加をリアクティブに検知できないのではないかと思います。
基本的にプロパティ追加検知はできないみたいで、Array.push()は特別（？）に検知できているのだと思います。
逆に配列でも、例えばseen.title[4] = "UnitPowerupDisp"などは検知できないようです。
https://jp.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85

また、以下のissueを見るとMapやSetのリアクティブ検知には対応していないかもしれません。（いつかサポートされるかも？）
https://github.com/vuejs/vue/issues/2410

そのため、同じようなことをやりたい場合、ピュアObjectでVue.setを使った運用が良いかと思います。
以下がヒントになるかと思います。
https://jp.vuejs.org/v2/guide/reactivity.html?#%E5%A4%89%E6%9B%B4%E6%A4%9C%E5%87%BA%E3%81%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85