このvueの例でコンテンツを表示するにはどうすればよいですか？

私は初めてvueで遊んでいて、簡単なテストファイルをノックしました。私は、APIコールからのデータによって占められているテーブルを持っており、各アイテムへのリンクを作成するためにvueルータを使用しましたが、このリンクはコンテンツを表示していません。ネットワークはそれがAPIへのリクエストを行っていることを示していますが、何らかの理由でテンプレートが表示されません（ハードコードされたコンテンツでさえも）。どうして？また、ルートコンテンツが最初のルータビューに表示されず、tblコンポーネントのルータビューだけに表示されるのはなぜですか？このvueの例でコンテンツを表示するにはどうすればよいですか？

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Vue.js test</title> 
    <meta charset="utf-8"> 
</head> 
<body> 
    <div id="app"> 
     <!-- this route displays correctly --> 
     <router-link to="/foo">Go to Foo</router-link> 
     <table-notification/> 
      <!-- content is not displayed here - why? --> 
      <router-view></router-view> 
    </div> 

    <script src="https://unpkg.com/vue"></script> 
    <script src="https://unpkg.com/vue-router"></script> 
    <script src="axios.min.js"></script> 

    <script>  
     const foo = {template:'<div>asdfasdf</div>',}; 

     var router = new VueRouter({ 
      routes: [ 
       {path: '/foo', component: foo}, 
       {path: '/notifications/:id', component: notification_view} 
      ] 
     }); 

     var app = new Vue({ 
      router: router 
     }).$mount('#app'); 

     var notification_view = new Vue({ 
      router: router, 
      template: ` 
       <div>iop 
        id: {{ obj.id}}<br/> 
        title: {{ obj.data.title}}<br/> 
        message: {{obj.data.message}}<br/> 
       </div>  
      `, 

      data: { 
       obj: {}, 
       id: 0, 
      }, 

      watch: { 
       '$route' (to, from) { 
        // check for id in url 
        if (this.$route.params.id) 
         this.update_notification(); 
       } 
      }, 

      methods: { 
       update_notification: function(){ 
        this.id = this.$route.params.id; 
        axios.get('http://api2/notifications/' + this.id) 
         .then(response => {this.obj = response.data.packet;}); 
       } 
      } 
     }); 

     var tbl = new Vue({ 
      router:router, 
      el: 'table-notification', 
      template: ` 
      <div> 
       <table> 
        <tr> 
         <th>Title</th> 
         <th>Created</th> 
         <th>Actions</th> 
        </tr> 
        <tr v-for="obj in objects"> 
         <td><router-link :to="link(obj)">{{obj.data.title}}</router-link></td> 
         <td>{{obj.created}}</td> 
         <td>actions</td> 
        </tr> 
       </table> 
       <router-view/> 
       <!-- why must router-view be here, and why isn't notification_view showing any output?--> 
      </div> 
      `, 
      methods: { 
       link: function(obj) {return '/notifications/' + obj.id;} 
      }, 

      data: { 
       objects: [], 
      }, 

      created: function(){ 
       axios.get('http://api2/notifications'). 
        then(response => 
        { 
         this.objects = response.data.packet; 
        }); 
      } 


     }); 
    </script> 
</body> 
</html>

出典

2017-10-29 user3791372