v-on:clickが動作しない｜vueが実行されていない？

前提・実現したいこと

２０１６年出版のある書籍のサンプルが動かない状況です。

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

デベロッパーツールのコンソールを確認しても
エラーメッセージは特に表示されません。

該当のソースコード

index.html
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport"
6          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title>vue-lessons</title>
9    <script src="https://npmcdn.com/vue/dist/vue.js"></script>
10    <script src="main.js"></script>
11    <link rel="stylesheet" href="style.css">
12</head>
13<body>
14<div onload="initial();">
15<h1>Vue.js</h1>
16<p id="msg" v-bind:class="{'a':isA, 'b':isB}" v-on:click="change();">クラスを操作します。</p>
17</div>
18</body>
19</html>

style.css
1.a {
2    color:red;
3    background: white;
4}
5.b {
6    color:white;
7    background:blue;
8}

main.js
1function initial() {
2    new Vue({
3        el:'#msg',
4        data: {
5            isA: true,
6            isB: false
7        },
8        methods: {
9            change: function(){
10                this.isA = !this.isA;
11                this.isB = !this.isB;
12            }
13        }
14    })
15}

試したこと

デベロッパーツールのhtmlを確認すると

index.html
1<p id="msg" v-bind:class="{'a':isA, 'b':isB}" v-on:click="change();">クラスを操作します。</p>

と展開されていなかったので

index.html
1v-on:click="change"

index.html
1<p id="msg" v-bind:class="'a':isA">クラスを操作します。</p>

など試してみましたが変化はありませんでした。

またcss、js、vueなどの読み込みはデベロッパーツールで確認できています。

補足情報（FW/ツールのバージョンなど）

このサンプルの前のページのサンプルまでは動作しており
v-on:clickも動作しておりました。

おそらく書籍が書かれた当時とvueのバージョンが違うのだと思い
調べてみたのですが、解決策が見つけられず
皆様のお力をお借りだ来たらとこちらに書かせていただいております。
よろしくお願いいたします。

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

回答1件

ベストアンサー

完全に原因を説明できるわけではありませんが、解決策(動作確認済み)をいくつか。

解決策１ bodyにonload="initial();"を移動させる

解決策２ scriptをhtmlロード後に実行されるようにする。
→ divのonloadを外し、<script src="main.js"></script>をbodyの最後に配置して、main.jsの最後でinitial();を呼び出すコードを配置。
もしくはdivのonloadを外し、main.jsをたとえば

window.onload = function () {
  new Vue({
    el:'#msg',
    data: {
      isA: true,
      isB: false
    },
    methods: {
      change: function(){
        this.isA = !this.isA;
        this.isB = !this.isB;
      }
    }
  })
};

こんな感じに書き換える。

以上でやっていることは全てhtmlロード後にscriptを実行するということだけです。

おそらくですが、