Проблемы с рендерингом контента vue.js

Я только что изучил Vue.js, и у меня возникли проблемы с его рендерингом. Скажем, у меня есть следующие строки кода:

index.html

<div id="header">
  <h5>{{pageName}}</h5>
  <p>{{pageSubtitle}}</p>
</div>

app.js

var header = new Vue({
  el: '#header',
  data: {
    pageName: 'CuteCat',
    pageSubtitle: 'World of cats'
  }
});

Когда я загружаю страницу, CuteCat и World of cats отображаются отлично, но когда я просматриваю источник, это то, что я получаю:

<div id="header">
  <h5>{{pageName}}</h5>
  <p>{{pageSubtitle}}</p>
</div>

Что я могу сделать, чтобы заменить скобки усов в источнике представления с объявленным значением, как это?

<div id="header">
  <h5>CuteCat</h5>
  <p>World of cats</p>
</div>

Заранее спасибо!