OnsenUI何故かうまく動かないリスト #メモ

v-forで何故か追加されない(追加はされてるけどpage__contentと同じ階層のところに追加されるので変なことになってしまう)
何故かだめ(v-ons-page直下でv-for使ったらだめ？？？)

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-onsenui"></script>
<script>
    ons.ready(function() {
        new Vue({
            el: '#app',
            template: '#main',
            data() {
                return ({
                    count: 3,
                    todos: [
                        {text: 1},
                        {text: 2},
                        {text: 3},
                    ],
                });
            },
            methods: {
                addList() {
                    this.count++;
                    this.todos.push({text: this.count});
                }
            }
        });
    });
</script>
</head>
<body>
<template id="main">
    <v-ons-page>
        <ons-button @click="addList">
            リストを増やす
        </ons-button>
        <div v-for="data in todos">
            {{ data.text }}
        </div>
    </v-ons-page>
</template>
<div id="app"></div>
</body>
</html>

こうするとOK

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-onsenui"></script>
<script>
    ons.ready(function() {
        new Vue({
            el: '#app',
            template: '#main',
            data() {
                return ({
                    count: 3,
                    todos: [
                        {text: 1},
                        {text: 2},
                        {text: 3},
                    ],
                });
            },
            methods: {
                addList() {
                    this.count++;
                    this.todos.push({text: this.count});
                }
            }
        });
    });
</script>
</head>
<body>
<template id="main">
    <v-ons-page>
        <ons-button @click="addList">
            リストを増やす
        </ons-button>
        <div>
            <div v-for="data in todos">
                {{ data.text }}
            </div>
        </div>
    </v-ons-page>
</template>
<div id="app"></div>
</body>
</html>