Не работает одновременно роутинг и отображение значений. В чём проблема?

Question

[Роман Ракзин]

Я взял пример роутинга на vue.js и решил к нему добавить отображение параметров. Не могу разобраться, но работает только что-то одно по отдельности.
Вот пример.

<script type="text/javascript" src="static/js/library/vue.min.js"></script>
<script type="text/javascript" src="static/js/library/router.js"></script>

	<div id="app">
	  <h1>Hello App! {{Myvalue1}}</h1> 
	  <p>
	    <!-- use v-link directive for navigation. -->
	    <a v-link="{ path: '/foo' }">Go to Foo</a>
	    <a v-link="{ path: '/bar' }">Go to Bar</a>
	  </p>
	  <!-- route outlet -->
	  <router-view></router-view>
	</div>
<script>
var Foo = Vue.extend({
    template: '<p>This is foo!</p>'
})

var Bar = Vue.extend({
    template: '<p>This is bar!</p>'
})


var App = Vue.extend({
	el: '#app',
	data: {
    	Myvalue1: 'Roman'
  	}})
var router = new VueRouter({
	history:true
}) 
 
router.map({
    '/foo': {
        component: Foo
    },
    '/bar': {
        component: Bar
    }
})
 
router.start(App, '#app')
</script>

Answer 1

[Владимир Пономарев]

Рассмотрите пожалуйста ваш пример, который я сделал на codepen.io. В связи с тем, что Vue компонент может быть переиспользован множество раз, его свойства data и el должны быть объявлены в виде функций а не просто как статичные свойства. Это дает возможность каждому экземпляру компонента иметь свою независимую копию значения этого свойства.

Answer 2

[surefire]

Компонент должен иметь не объект data, а функцию возвращающую объект. Так как компонент инстанцируется, у каждого инстанса создается своя data.

var App = Vue.extend({
  el: '#app',
  data: function() {
       return {
    	  Myvalue1: 'Roman'
       }
     }
})

https://jsfiddle.net/duzmncp9/