Binding Props in VueJs Components

Passing data to VueJs components by binding data to props - http://coligo.io

HTML

<script src="https://cdn.jsdelivr.net/vue/2.1.0/vue.js"></script>
<div id="app">
  <button @click="hideContect = true">
    Show Content
  </button>

  <button @click="changeContent">
    change Content
  </button>
  
  <button @click="hideContect = false">
    Hide Content
  </button>

  <child :title="title" :author="author" :content="content" v-if="hideContect">      </child>
</div>

<template id="child">
<div>

	<h1>{{ compTitle }}</h1>
	<h4>{{ author }}</h4>
	<p>{{ content }}</p>
  </div>
</template>

JavaScript

var child = {
	template: '#child',
	props: ['title', 'author', 'content'],
  data: function(){
    return {
      compTitle: this.title
    }
  },
  watch:{
    title: function(newVal){
      this.compTitle = newVal;
    }
  }
}

var vm = new Vue({
  components: { child },
	el: '#app',
	data: {
		author: 'Johnnie Walker',
		title: 'Original text',
		content: 'A bunch of steps and a whole lot of content',
    hideContect: false
	},
  mounted () {
    this.title = "Updated in mount"
  },
  methods: {
    changeContent: function(){
      this.title += ' changed'
    }
  }
});