Vue Router - Passing props

HTML

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

<div id="app">
  <router-link to="/hello">/hello</router-link>
  <router-link to="/bye/Bar-bar">/bye</router-link>
  <router-view></router-view>
</div>

Babel + JSX

const Home = { props: ['name'], template: '<div>Hello {{ name }}</div>' }
const Foo = { props: ['name'], template: '<div>Bye {{ name }}</div>' }

const vm = new Vue({
    el: '#app',
	  router: new VueRouter({
        routes: [
            {
                path: '/hello',
                component: Home,
                props: () => ({ name: vm.name1 }),
            }, { 
                path: '/bye/:name',
                component: Foo,
                props: true
            }
        ]
    }),
    data: {
  		  name1 : []
    },
    mounted() {
        this.name1 = 'Foo-foo';
    }
})