【Vue.js】nextTickがうまく動作しない

はじめに

こんにちは！
以前、updatedの中でnextTickを使用し、DOM描画完了後にツールチップを付与する実装をしていたのですが、なぜか一部うまく動作しなかったのでそちらの解決方法を共有したいと思います。

実装

当初、下記の実装でDOM描画完了後にツールチップを付与しようとしましたが、なぜかうまくいきません、、
```
this.$nextTick(() => {
  $('[data-rel="tooltip"]').tooltip();
  $('[data-rel="tooltip-delete"]').tooltip({template:'<div class="tooltip tooltip-delete" role="tooltip"><div class="tooltip-arro   w"></div><div class="tooltip-inner"></div></div>'});
});
```
念のために$nextTickの内部で対象のエレメントの取得を試みると、生成されていないようでした。
vue.jsの公式ドキュメントによると

Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.

【訳】
callback を延期し、DOM の更新サイクル後に実行します。DOM 更新を待ち受けるために、いくつかのデータを変更した直後に使用してください。

Vue.js APIリファレンス nextTick

とあるので、使用上はあり得ないはずなのですが、、、
原因不明なので、setTimeOutでツールチップ付与処理を遅らせることで対応しました。
```
this.$nextTick(() => {
 setTimeout(function() {
   $('[data-rel="tooltip"]').tooltip();
   $('[data-rel="tooltip-delete"]').tooltip({template:'<div class="tooltip tooltip-delete" role="tooltip"><div class="tooltip-arro    w"></div><div class="tooltip-inner"></div></div>'});
 }, 100);
});
```

終わりに

今回のような事象はあまり報告がないようなので、同じような部分で悩んでいる方の一助になればと思います。
根本的な解決にはなっていないかと思うので、原因分かり次第共有させていただきたいと思います。