【Vue.js】Vue.jsでリアクティブにHTMLを書き換えたい2

Vue.js 
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue.jsの練習</title>
  </head>
  <body>
    <div id="app">
        <p>{{message1}}</p>
        <p>{{message2}}</p>
　　//書き換え用のボタンを設置して、v-on:イベントを設置。
　　//"toggleLoginType"は任意の名前です。
        <button v-on:click="toggleLoginType">書き換えボタン</button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                message1:"変数の中身1",
                message2:"変数の中身2",
            },
　　　methods内にてv-on:イベントで指定したタグに対しての指定をする
            methods:{
                toggleLoginType:function(){
                    this.message1 = "書き換え成功しました！";
                    this.message2 = "書き換え成功しました！";
                }
            }
        });
    </script>
  </body>
</html>

**参考
[https://startout.work/single_pc_web.php?id=1287&cat=vuejs:title]