ons-fabタグの:visible=falseが初期表示では機能しなかったのでv-showを使ってみた

onsen-uiをVue.jsで最近使っています。
様々なCSSセットがあって便利なんですが…かゆいところに手が届かなかったりします。

例えば

スクロールしたらふわっと出てくるTOPページに戻るfab
https://giga-log.com/homepage/pagetop-button/

こんな感じの初期表示時や画面位置がトップのときは非表示でスクロールされたらでてくるものを作りたい。。

ということでやってみた

公式ドキュメントでは…
※https://ja.onsen.io/v2/api/vue/v-ons-fab.html
⬆︎のページで以下のコード書き換え&実行もできるので実際に試してみてください。

//html
<template id="main">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Floating action button</div>
    </v-ons-toolbar>

    <p style="text-align: center">
      <label>Show FAB <input type="checkbox" v-model="fabVisible" /></label>
    </p>
    <v-ons-fab position="bottom right" :visible="fabVisible">
      <v-ons-icon icon="md-face"></v-ons-icon>
    </v-ons-fab>
  </v-ons-page>
</template>
<div id="app"></div>

//js
new Vue({
  el: '#app',
  template: '#main',
  data() {
    return {
      fabVisible: true //ここを変えます
    };
  }
});

となっているのですが、

//js
new Vue({
  el: '#app',
  template: '#main',
  data() {
    return {
      fabVisible: false //ここを変えました
    };
  }
});

に変更をしてもons-fabは表示されてしまいます。
ここから初期表示時には:visibleの評価をしていないということです。

やっぱり初期表示時は非表示にしたい

ということで、

<!--    <v-ons-fab
      position="bottom right"
      :visible="fabVisible"
    >-->
    <v-ons-fab
      position="bottom right"
      :visible="fabVisible"
      v-show="flg"
    >

//js
new Vue({
  el: '#app',
  template: '#main',
  data() {
    return {
      fabVisible: true ,
      flg=false
    };
  },
  mounted(){
    document.getElementById('main').addEventListener('scroll',this.setFlg)
  },
  methods:{
   //スクロールされたら表示される
   setFlg(){
     this.flg=true
　　　　　　　　　　if(document.getElementById('main').scrollTop === 0){
        this.showFab = false
      }else{
        this.showFab = true
      }
   }
  }

やってみて

付け焼き刃のような書き方になってしまいました。
どうして初期表示時にvisible=falseが機能しないのかは不明です。（バグ？ご存知の方教えてください。）

おそらく他に良いやり方があるはずですが…私が今できるのはここまでです