Vue材质选项卡不切换

Question

我试图在vue材质上使用“选项卡”以具有几个选项卡，当用户单击它们时，它们会在同一页面中切换。 目前，第一个标签显示了内容，但是当我在其他标签上单击时，它显示为空。

<template>
  <div class="content">
  <md-tabs md-sync-route>
      <md-tab id="tab-home" md-label="Home" to="/home" >
        Home Tab
      </md-tab>
      <md-tab id="tab-pages" md-label="Pages" to="/foo">
        Pages tab
        <p>Unde provident nemo reiciendis officia, possimus repellendus. Facere dignissimos dicta quis rem. Aliquam aspernatur dolor atque nisi id deserunt laudantium quam repellat.</p>
      </md-tab>

    </md-tabs>

    </div>
  </div>
</template>

<script>
export default {
  name: 'TabContent'
}
</script>

<style>
.md-tabs-navigation{
background: linear-gradient(60deg,#ec407a,#d81b60);
}
</style>

编辑：我还添加了vue材料示例https://codesandbox.io/s/48m3qrvmo4?module=App.vue