VueにおいてBootstrapTimepickerのデータ更新が取得できずバインディングできない

Vueを勉強し始めて２ヶ月程です。

BootstrapTimepickerを利用して単純なバインドを試しているのですが、
http://jdewit.github.io/bootstrap-timepicker/

Timepickerで更新される値がVueで更新を検知できずバインディングがされません。

カスタムイベント等も試してみたのですが、なぜか検知できず。
今はVue用に自前でTimePickerコンポーネントを作ることを考えていますが、
原因だけ知りたいという探究心から調査していますが全くわかりません。

よろしくお願いします。

var app = new Vue({
 el: '#app',
 data:{
  time: "12:00 AM"
    }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
<script type="text/javascript"  src="//unpkg.com/vue"></script>
<div id="app">
  <input v-model="time" data-provide="timepicker">
  <div>
  {{ time }}
  </div>
</div>