vue.jsにて、ボタン押下後、メッセージを表示、１行後に削除する方法

vue.js初心者です。

前提・実現したいこと

vue.jsにて、以下の処理を作成したいです。
・ボタンを押下した後
メッセージを表示
メッセージを１秒後に削除

発生している問題・エラーメッセージ

１秒後に削除する方法が、分かりません。

該当のソースコード

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
</head>
 
<body>
    <div id="app">
 
        <button v-on:click="showMessage">ボタン</button>
 
        <p>{{ msg }}</p>
 
    </div>
 
    <script>
 
        new Vue({
            el: '#app',
            data: function () {
                return {
                    msg: ""
                };
            },
            methods: {
                showMessage: function () {
                    this.msg = 'こんにちわ'
                }
            }
        });
 
    </script>
 
</body>
 
</html>

試したこと

・javascript setTimeout()を利用する
・cssで、 transitionを活用する

初歩的なご質問と、自負しておりますが、頭が混乱して、困っております。
調べろ等の回答は、遠慮していただけると幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

重複呼び出しを防ぐためにsetIntervalでやってみました

html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="UTF-8">
6    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
7</head>
8
9<body>
10    <div id="app">
11
12        <button v-on:click="showMessage">ボタン</button>
13
14        <p>{{ msg }}</p>
15
16    </div>
17
18    <script>
19
20        new Vue({
21            el: '#app',
22            data: function () {
23                return {
24                    msg: "",
25                    intervalID: 0,
26                };
27            },
28            methods: {
29                showMessage: function () {
30                    this.timerStart('こんにちわ', 1000);
31                },
32                timerStart: function(msg, delay) {
33                    if(this.intervalID == 0) {
34                        this.msg = msg;
35                        this.intervalID = setInterval(this.timerEnd, 1000);
36                    }
37                },
38                timerEnd: function() {
39                    if(this.intervalID != 0) {
40                        this.msg = '';
41                        clearInterval(this.intervalID);
42                        this.intervalID = 0;
43                    }
44                }
45            }
46        });
47
48    </script>
49
50</body>
51
52</html>