Routing and displaying values ​​do not work at the same time. What is the problem?

Question

JavaScript

I took the vue.js routing example and decided to add parameter mapping to it. I can not figure it out, but only one thing works separately.
Here is an example.

<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

Please consider your example which I made on codepen.io . Due to the fact that a Vue component can be reused many times, its data and el properties must be declared as functions and not just static properties. This allows each component instance to have its own independent copy of that property's value.