x-tamplateの中に書いたスクリプトが動作しない

前提・実現したいこと

簡単なSPAを作る際に、/usersを表示したい

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

エラーメッセージは発生していません

該当のソースコード

html
1<html lang="en">
2<head>
3    <meta charset="UTF-8">
4    <meta name="viewport" content="width=device-width, initial-scale=1.0">
5    <title>Document</title>
6</head>
7
8<body>
9    <div id="app">
10        <nav>
11            <router-link to="/top">トップページ</router-link>
12            <router-link to="/users">ユーザ一覧ページ</router-link>
13        </nav>
14        <router-view></router-view>
15    </div>
16    <script src="https://unpkg.com/vue@2.5.17"></script>
17    <script src="https://unpkg.com/vue-router@3.0.1"></script>
18    <script src="script.js"></script>
19
20
21    <script type="text/x-template" id="user-list">
22        <div>
23            <div class="loading" v-if="loading">読み込み中</div>
24            <div class="error" v-if="error">{{ error }}</div>
25            <div v-for="user in users" :key="user.id">
26                <h2>{{ user.name }}</h2>
27            </div>
28        </div>
29    </script>
30
31
32</body>
33</html>

vue
1        var router = new VueRouter({
2            routes: [{
3                path: '/top',
4                component: {
5                    template: '<div>トップページです</div>'
6                }
7            }, {
8                path: '/users',
9                component: UserList
10            }]
11        })
12
13        var getUsers = function(callback) {
14            setTimeout(function() {
15                callback(null, [{
16                    id: 1,
17                    name: 'hogehoge1'
18                }, {
19                    id: 2,
20                    name: 'hogehoge2'
21                }])
22            }, 1000)
23        }
24
25        var UserList = {
26            template: '#user-list',
27            data: function() {
28                return {
29                    loading: false,
30                    users: function() {
31                        return []
32                    },
33                    error: null
34                }
35            },
36            created: function() {
37                this.fetchData()
38            },
39            watch: {
40                '$route': 'fetchData'
41            },
42            methods: {
43                fetchData: function() {
44                    this.loading = true
45                    getUsers((function(err, users) {
46                        this.loading = false;
47                        if (err) {
48                            this.error = err.toString()
49                        } else {
50                            this.users = users
51                        }
52                    }).bind(this))
53                }
54            }
55        }
56        var app = new Vue({
57            router: router
58        }).$mount("#app")