Vueで、Ajax受信した文字が表示できない

困っていること

このマスタッシュ{{ pushname }}に、Ajax通信で受け取った文字を表示させたいと思っています。

<!-- 一部抜粋(result.html) -->
　<div class="question">
　　<h1>貴方へのおすすめの温泉は、{{ pushname }}です。</h1>
　</div>

前提・実現したいこと

このpushnameという変数はdata属性で宣言しており、非同期通信で取得したget.push_name(result.html参照)を、this.pushnameに代入して表示させるつもりでいました。
またこの問題はDOM要素が深く関わっていると聞いたので、その路線で調べておりました。

　(もし間違っていましたらご指摘いただけますと嬉しいです)

データ一覧

result.html(html部分)

<!-- result.html -->
　<div class="question">
　　<h1>貴方へのおすすめの温泉は、{{ pushname }}です。</h1>
　</div>

result.html(JavaScript部分)

// result.html
<script>
　ELEMENT.locale(ELEMENT.lang.ja)
		    var ten = new Vue({
		    	el: '#app',
		    	data: {
		            qFlg: 1,
		            pushname: '',
		            a: "hello",
		        },
		    	created: function() {
		    		console.log('created');
		    		// this.init();
		        },
		        mounted: function(){
		        	console.log('mounted');
					this.init();
			    },
		        methods: {
		        	init: function() {
		        		$.ajax({
		                    url: 'action/one/push',
		                    type: 'post',
		                }).then(
		                		function(get) {
		                			this.pushname = get.push_name;
		                			console.log("成功");
		                			console.log(get.push_name);
		                			console.log(this.pushname);
		                			return this.pushname;
		                		},
		                		function() {
		                			console.log('error');
		                			console.log("失敗");
		                		}
		                );
		        	},
		        	onMainCardCLick: function () {
		                window.location.href = "index";
		            },
		            onResultCLick: function () {
		                window.location.href = "result";
		            },
		            counterQuestion: function() {
		            	this.qFlg = this.qFlg + 1;
		            },
				    name: 'Result',
				    computed: function() {
				    	console.log("computed");
				    }
		        },
		    });
		</script>