vue.jsでCSSのセレクタを複数追加したい （vue.jsのフィルタ機能を併用）

Question

実現したいこと

CSSのセレクタを複数追加したいです。
通常は、表示側で :classでバインディングし、カンマ区切りでオブジェクトを追加していけば良いかと思うのですが、
今回は、vue.jsのフィルタ機能（このフィルタ関数も、cssのセレクタを返します） を併用したく、
やり方が分からず困っています。
やりたいこと①②を同時に実現できる書き方は存在するでしょうか？

実現したいこと（詳細）

①hogeのproperty_aによって、HogeFilter（以下）を発動させて
cssのセレクタ（apple / peach / bananaいずれか）をまず１つ付与する

HogeFilter (property_a) {
    if (property_a === 'apple') {
      return 'apple'
    } else if (property_a === 'peach') {
      return 'peach'
    } else {
      return 'lemon'
    }

②hogeのproperty_bがtrueの場合、さらにセレクタ（add_selector)を付与する

求める結果（一例）

//property_aの値が 'apple' かつ property_bの値が trueの場合
class = "apple add_selector" 
//property_aの値が 'banana' かつ property_bの値が falseの場合
class = "banana" 

試したこと

以下の書き方だと、property_aの値が 'apple' かつ property_bの値が trueの場合でも
後者のみが作動してしまう結果になりました。

// 試したこと
:class="[hoge.property_a | HogeFilter, 'add_selector' : hoge.property_b]

//結果
class = "add_selector"

●その他
HogeFilterは汎用的に使用しているもので、できればこのフィルタ関数自体の変更は避けたいです。

Answer 1

こちら以下の方法で自己解決いたしました。
もしもっとスマートな方法がありましたら教えていただきたいですが。。

調査でわかったこと：

パイプ（|)で左側のFilter関数の結果を以てさらにFilter関数をチェイン可能

解決方法

js側で AddSelectorFilterを作り、表示側で以下のようにFilter関数をチェイン

:class="hoge.property_a | HogeFilter | AddSelectorFilter hoge.property_b

AddSelectorFilter (property_a, property_b) {
    return property_b ? 'add_class' : property_a
    }