Vue JS Dynamically Added Property not Reactive

HTML

<div id="app">
Text
  <controller></controller>
</div>

<template id="controller">
  <div>
    <div v-for="(ele,ind) in aa">
      <div v-for="(el,in) in ind">
          {{in}}   
      </div>
    </div>
    <button @click="aaaa">
    aa
    </button>
  </div>
</template>

JavaScript

Vue.component('controller', {
	template: '#controller',
  data(){
  	return{
    	aa:{
      	a1:{
        	x:"x1",y:"y1"
        },
        a2:{
        	x:'x2',y:'y2'
        }
      }
    }
  },
  methods:{
  	aaaa(){
      this.aa = Object.assign({},this.aa,{'a3':{x:'x3',y:'y3'}});
    }
  }
});

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