Laravel＋Vueで Uncaught Referrence Error: Vue is not defined が出てしまう

このページの「実際の全コード」のところのコードを、適当なLaravelプロジェクトのbladeにコピペして動作確認しているのですが、
cdnからの読み込みだと問題ないのに

PHP
1<script src=" {{ mix('js/app.js') }} "></script>

同じ箇所にこちらを記述しても、
Uncaught ReferrenceError: Vue is not defined
とエラーがconsoleに吐き出されるだけでVueが読み込まれません。

参考にしたURL：
コピペでOK！Vue.jsでリアルタイム検索をつくる方法
https://blog.capilano-fw.com/?p=648
LaravelからVue.jsを使う最短レシピ
https://qiita.com/fruitriin/items/e0f2c9aa035c3ff2c874
Laravel＋Vueで error 'Vue' is not defined が出てしまう
https://teratail.com/questions/237206

bladeファイルのあるLaravelプロジェクトは、npm使ってなかったので、
npm install
npm run dev
でエラーなくコンパイルところまでは完了させました。

「Laravel＋Vueで error 'Vue' is not defined が出てしまう
https://teratail.com/questions/237206」
が近い症状なのですが、私の環境では、constに変えても解決しませんでした。

Laravelのバージョンは、6.18.11です。
どなたかご助力いただけましたらありがたいです。
よろしくお願いいたします。

app.js

JS
1/**
2 * First we will load all of this project's JavaScript dependencies which
3 * includes Vue and other libraries. It is a great starting point when
4 * building robust, powerful web applications using Vue and Laravel.
5 */
6
7require('./bootstrap');
8
9window.Vue = require('vue');
10
11/**
12 * The following block of code may be used to automatically register your
13 * Vue components. It will recursively scan this directory for the Vue
14 * components and automatically register them with their "basename".
15 *
16 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
17 */
18
19// const files = require.context('./', true, /.vue$/i)
20// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
21
22Vue.component('example-component', require('./components/ExampleComponent.vue').default);
23
24/**
25 * Next, we will create a fresh Vue application instance and attach it to
26 * the page. Then, you may begin adding components to this application
27 * or customize the JavaScript scaffolding to fit your unique needs.
28 */
29
30const app = new Vue({
31    el: '#app',
32});

webpack.mix.js

JS
1const mix = require('laravel-mix');
2
3/*
4 |--------------------------------------------------------------------------
5 | Mix Asset Management
6 |--------------------------------------------------------------------------
7 |
8 | Mix provides a clean, fluent API for defining some Webpack build steps
9 | for your Laravel application. By default, we are compiling the Sass
10 | file for the application as well as bundling up all the JS files.
11 |
12 */
13
14mix.js('resources/js/app.js', 'public/js')
15    .sass('resources/sass/app.scss', 'public/css');

test.blade.php

PHP
1<html>
2<body>
3<div id="app">
4    <input type="text" v-model="keyword">
5    <table>
6        <tr v-for="user in filteredUsers">
7            <td v-text="user.id"></td>
8            <td v-text="user.name"></td>
9            <td v-text="user.email"></td>
10        </tr>
11    </table>
12</div>
13<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> -->
14<script src="{{ mix('js/app.js') }}"></script>
15<script>
16
17    new Vue({
18        el: '#app',
19        data: {
20            keyword: '',
21            users: [
22                {
23                    id: 1,
24                    name: '鈴木太郎',
25                    email: 'suzukitaro@example.com'
26                },
27                {
28                    id: 2,
29                    name: '佐藤二郎',
30                    email: 'satoujiro@example.com'
31                },
32                {
33                    id: 3,
34                    name: '田中三郎',
35                    email: 'tanakasaburo@example.com'
36                },
37                {
38                    id: 4,
39                    name: '山本四郎',
40                    email: 'yamamotoshiro@example.com'
41                },
42                {
43                    id: 5,
44                    name: '高橋五郎',
45                    email: 'takahashigoro@example.com'
46                },
47            ]
48        },
49        computed: {
50            filteredUsers: function() {
51
52                var users = [];
53
54                for(var i in this.users) {
55
56                    var user = this.users[i];
57
58                    if(user.name.indexOf(this.keyword) !== -1 ||
59                        user.email.indexOf(this.keyword) !== -1) {
60
61                        users.push(user);
62
63                    }
64
65                }
66
67                return users;
68
69            }
70        }
71    });
72
73</script>
74</body>
75</html>