VueRouterのpathに割り当てたcomponentにpropsで値を渡したい。

###実現したい事
index.phpが持つ変数$post_listsをVueRouter経由のアクセス時にもpropsへ値を渡したい。
($post_listsはjsonencodeされた連想配列で、id,title,bodyのキーを持つ。コンテンツ投稿記事を想定。)

下記ソースの場合、以下の挙動となる。
/topアクセス時　　：　<div>トップページ</div>と投稿記事一覧のテーブルがひとつ描画される。
/postsアクセス時　：　投稿記事一覧のテーブルがひとつ描画される。

望む挙動としては、/postアクセス時は投稿記事一覧のテーブルを二つ描画したい。

<div id="app">
    <post-lists post-lists=<?= $post_lists ?>></post-lists>
</div>

　　
上記の呼び出し時は、propsが受け渡しが効いているが、VueRouterを通すと値が受け渡されず、テーブルが描画できない。この問題を解決したい。

###該当ソース

php
1//index.php
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="utf-8"/>
6  <title>VueRouterチェック</title>
7  <script src="http://unpkg.com/vue@2.5.17"></script>
8  <script src="http://unpkg.com/vue-router@3.0.1"></script>
9</head>
10<body>
11    <div id="router" >
12        <ul>
13　　　　　　　<router-link to="/top">トップページ</router-link>
14            <router-link to="/posts">投稿一覧</router-link>
15        </ul>
16        <hr>
17        <router-view></router-view>
18    </div>
19
20    <div id="app">
21        <post-lists post-lists=<?= $post_lists ?>></post-lists>
22    </div>
23
24    <script src="/asset/vue/js/post-lists.js"></script>
25    <script src="/asset/vue/js/router.js"></script>
26    
27</body>
28</html>
29

js
1//router.js
2var router = new VueRouter({
3
4    routes: [
5        {
6            path: '/top',
7            component:{
8                template: '<div>トップページ</div>'
9            }
10        },
11        {
12            path: '/posts',
13            component:{
14                template: '<post-lists post-lists=<?= $post_lists ?>></post-lists>'
15            }
16        }
17    ]
18})
19
20new Vue({
21    router: router
22}).$mount('#router')

js
1//post-lists.js
2Vue.component('post-lists', {
3    template: `<div>
4                    <table>
5                        <tr>
6                            <th>ID</th>
7                            <th>title</th>
8                            <th>body</th>
9                        </tr>
10                        <tr v-for="list in parsedPostLists">
11                            <td>{{ list.id }}</td>
12                            <td>{{ list.title }}</td> 
13                            <td>{{ list.body }}</td> 
14                        </tr>
15                    </table>
16                 </div>`
17    ,
18    props:['postLists'],
19    computed: {
20        parsedPostLists: function() {
21            return JSON.parse(this.postLists)
22        }
23    }
24});
25
26new Vue({
27    el: '#app'
28})