Vue.jsのテキストボックスにJavascript側で持っているデータを表示させたい。

###前提・実現したいこと
Vue.jsのテキストボックスにサーバーから取得したデータを表示したいのですが、その前にまずテキストボックスの値をjavascript側で持っている値に変更できません。
ゆくゆくはボタンを押したらデータを取得し(←ここまではできている)、取得したデータをテキストボックスに反映させたいです。
###発生している問題・エラーメッセージ
v-modelを使って取得しようとしているのですがどうもうまく行きません。

###該当のソースコード

HTML
1<script src="https://npmcdn.com/vue/dist/vue.js"></script>
2<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"></script>
3<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
4    <div class="container">
5        <div class="row">
6            <div class="col-sm-5">
7                <div class="card">
8                    <div class="card-header">データサンプル</div>
9                    <input type="text"  v-model="dummy"  class="form-control" placeholder="名前">
10                </div>
11            </div>
12        </div>
13    </div>

JavaScript
1var dummy="test"
2
3
4
5new Vue({
6    el: '#app',
7    data: function () {
8        return {
9            dummy:dummy,
10        }
11    },
12})
13