v-ifの描画時のmounted処理をいい感じにしたい

はじめに

Vue.js では v-if という構文を使うことで条件付きレンダリングをすることができます。

やりたかったこと

基本的にVue.jsでDOMを直接操作するのはイケてないと思いますが、jqueryでしか作成されていないLibraryを使う際にDOM操作をする必要性が出てきます。jquery datepicker等
v-if で宣言したタグの中身のタグに対してDOM操作を描画時に行う際、 その呼び出し元のVue.jsファイルの mounted() に書いてもDOMがないので参照エラーにて失敗してしまいます。
なので、v-if で宣言しているタグが描画されたタイミング(v-ifの中の式が trueになるタイミング)でDOM操作を実行したいと思いました。

プロセス

v-if で宣言されているタグは vue.js インスタンスとして生成されます(あっているか不安なので指摘あれば)
そのため、 v-if で宣言されているタグにも mounted() methodを持てると考えました。

そこで、 <div v-if="条件" :mounted={}> など色々試行錯誤してみましたが、うまくできませんでした。

結論

Vue.jsでは mixin という、コンポーネントがもつmethodをオーバーライドする機能があります。
そこで以下のように v-if を宣言している、タグ内で mixin で mounted をオーバーライドすることでやりたいことができました。

sample

<div v-if="条件" :mixins="[{mounted: hogehogeMethod()}]">

さいごに

今回のようなケースの場合はコンポーネントとして独立させるというのが正解だと思います。
しかし、もともとの設計思想ですべてのパーツをコンポーネント化するという設計思想じゃなく、今回のような対応を取りました。

いろいろ調べてみて、私なりに出した結論がこのやり方でしたが、もしもっと良い方法やこのやり方に難点等があればご指摘いただければと思います。