Vue Y U NO UPDATE : 
  Working my way learning about Vue. I chose it as the better alternative after looking at React, Angular and Svelte.

   I have a simple example that its not working probably because I'm not getting/understanding the reactive behaviour of Vue.

Plain simple App:

    > <template>
    >   <div id="app">
    >         <app-header></app-header>
    >     		<router-view/>
    >         <app-footer></app-footer>
    >   </div>
    > </template>
    > 
    > <script>
    >     import Header from './components/Header.vue';
    >     import Home from './components/Home.vue';
    >     import Footer from './components/Footer.vue';
    >     export default {
    >         components: {
    > 			name: 'App',
    >             'app-header': Header,
    >             'app-footer': Footer
    >         }
    >     }

   Where Home.vue and Footer.vue have plain HTML content on the template.


On Header.vue I have:

    > <template>
    > 	<div>
    > 		<h1> The Header </h1>
    > 						<nav>
    > 								<ul>
    > 									<li>Curr Player:&nbsp;{{ethaccount}}</li>
    > 
    > 									<li>Prop owner:&nbsp;{{propOwner}}</li>
    > 
    > 								</ul>
    > 						</nav>
    > 
    > 		<hr>
    > 	</div>
    > 
    > </template>
    > 
    > <script>
    > 
    > 
    >   export default {
    >     data() {
    >       return {
    >         ethaccount: "N/A",
    > 		propOwner: "N/A"
    >       }
    >     },
    >     methods: {
    > 
    > 			update() {
    > 
    >                         var ethaccount = "0xAAAAAA123456789123456789123456789";
    >                         console.log("ETH Account: " + ethaccount);
    > 
    >                         var propOwner = "0xPPPPPPPPPPP987654321987654321";
    >                         console.log("Prop Account: " + propOwner);
    > 					}
    > 
    >     },
    > 	mounted() {
    > 		this.update()
    > 	}
    >   };
    > </script>

  But I'm unable to get the header updated and unable to find what I'm doing wrong. Help.

