Vue data内 this指向

参考如下，没太看懂
https://www.cnblogs.com/bin-pureLife/p/10416012.html

以下是自己写的例子，结论有了，就是不知道为啥

<div id='app'>
	{
  {str}}
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			id:'123',
			str:this.location.href,
		},
		
	})
</script>

上面很好明白
下面这个？？？

<div id='app'>
	<input type="button" @click="showThis">
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			id:'789'
		},//哪个data写在后面就用哪个
		data(){
			
			var id='123';//没用，只看return里的
			return {
				id:'456',
                str:'hhh'+this.id,//这里th