Vue JS Dynamically Added Property not Reactive

HTML

<div id="app">
  <h1>Vue JS Dynamically Added Property not Reactive</h1>
  <p>The "body" property has been added dynamically. It is not reactive :(</p>
  <controller :obj="{title: 'TITLE'}"></controller>
</div>

<template id="controller">

  <input type="text" v-model="obj.title">
  <p><b>The Title Is: </b> {{ obj.title }}</p>
  <input type="text" v-model="obj.body">
  <p><b>The Title Is: </b> {{ obj.body }}</p>
  
</template>

JavaScript

Vue.component('controller', {
	template: '#controller',
	props: ['obj'],

	created: function() {
  },
});

new Vue({
  el: '#app',
});