Uncaught ReferenceErrorについて

困っていること

あるサイトを参考に下記ソースを構築し、動作確認を行ったところ、
『Uncaught ReferenceError: Vue is not defined』というエラーが
clomeのconsolで表示されました。
調べても解決方法がわかりませんでした。よろしくお願いします。
下記ソースの『new Vue({』の所でエラーが起きているようです。

php
1<html>
2<head>
3<meta charset="utf-8">
4<meta name="csrf-token" content="{{ csrf_token() }}">
5</head>
6<body>
7    <div id="chat">
8        <textarea v-model="message"></textarea>
9        <br>
10        <button type="button" @click="send()">送信</button>
11        <hr>
12        <div v-for="m in messages">
13            <!-- 登録された日時 -->
14            <span v-text="m.created_at"></span>：&nbsp;
15            <!-- メッセージ内容 -->
16            <span v-text="m.body"></span>
17        </div>
18    </div>
19    <script src="js/app.js"></script>
20    <script>
21    new Vue({
22    el: '#chat',
23    data: {
24        message: '',
25        messages: []
26    },
27    methods: {
28        getMessages() {
29            const url = 'ajax/chat';
30            axios.get(url)
31                .then((response) => {
32                    this.messages = response.data;
33                });
34        },
35        send() {
36            const url = 'ajax/chat';
37            const params = { message: this.message };
38            axios.post(url, params)
39                .then((response) => {
40                    // 成功したらメッセージをクリア
41                    this.message = '';
42                });
43        }
44    },
45    mounted() {
46        this.getMessages();
47        Echo.channel('chat')
48        .listen('MessageCreated', (e) => {
49            this.getMessages(); // 全メッセージを再読込
50        });
51    }
52});
53    </script>
54</body>
55</html>
56