Vue.jsでメッセージを一時的にフェードインとアウトで出す方法

やりたいこと

Vue.jsをやり始めたばかりで、間違っている点あればご教授お願いします。
更新や適応をした際に、画面の上や下に一時的にメッセージが表示される物を作成します。
例えば、メッセージを送信したら「送信完了」などのように表示されるようにします。
今回はボタンを押した後、メッセージを２秒間表示するようにしています。

コード

CDNなどでVue.jsは使用することができるようにしておいてください。

HTML

<div id="app">
  <div class="">
    <button @click="clickBtn" id="btn">ボタン</button>
  </div>
  <transition name="fade">
    <p v-if="message" class="result">{{ message }}</p>
  </transition>
</div>

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}
.result {
  position: fixed;
  top: 0;
  width: 100vw;
  background-color: rgba(0,195,255,0.5);
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
}

javascript

var App = new Vue ({
  el: "#app",
  data: {
    message: "",
  },
  methods: {
    clickBtn: function () {
        this.message = '更新されました。'
            setTimeout(() => {this.message = false;}, 2000);
    }
  }
})

やっていること

HTML

HTMLではボタンにクリックイベントを設定し、タグで囲まれたところにメッセージが表示されるようになります。

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}

この部分では、フェードインとフェードアウトのために、opacityを設定しています。
それより下の部分ではメッセージの装飾を制御しています。
この部分は好きに変更して大丈夫になります。

javascript

  data: {
    message: "",
  },

messageの中は初期値を空白にする必要がありますので、必ずmessage:""を記載します。

  clickBtn: function () {
        this.message = '更新されました。'
        setTimeout(() => {this.message = false;}, 2000);
    }

this.message = ''この部分で表示する文章を記載します。
setTimeout(() => {this.message = false;}, 2000);の2000の部分で表示する時間を設定します。ミリ秒で記載する必要があります。（例：1秒=1000、10秒=10000)

活用

現在はボタンを押したときに表示されるようになっていますが、今後はデータの更新や削除などを行なった際に出るようにしていきたいです。
作り次第まとめていきます。