Vue.js を使って h1 タグの内容をもとにページ内リンクのリストを作る方法 ref: http://qiita.com/shingorow/items/3558217269c2b722dba5

file0.html

<ul class="menu">
  <li v-for="title in titles">
    <a v-bind:href="'#'+title.href">{{ title.title }}</a>
  </li>
</ul>
<article>
  <header>
    <h1 id="first" class="add-to-list">First article</h1>
  </header>
  <section>
    <p>I have a pen.</p>
  </section>
</article>

<article>
  <header>
    <h1 id="second" class="add-to-list" alt-title="Second Section">Second article</h1>
  </header>
  <section>
    <p>I have a apple.</p>
  </section>
</article>

<article>
  <header>
    <h1 id="third" class="add-to-list">Third article</h1>
  </header>
  <section>
    <p>I have a pen.</p>
  </section>
</article>

<article>
  <header>
    <h1 id="fourth" class="add-to-list">Fourth article</h1>
  </header>
  <section>
    <p>I have a pineapple.</p>
  </section>
</article>

file1.js

var titles = document.getElementsByClassName('add-to-list');
var titleTextArray = [];
var title;

for (var i=0; i<titles.length; i += 1) {
  title = titles[i];
  titleTextArray.push({
    title: title.hasAttribute('alt-title') ? title.getAttribute('alt-title') : title.innerText,
    href: title.id
  });
}

var vm = new Vue({
  el: '.menu',
  data: {
    titles: titleTextArray
  }
});