Vue.jsで階数を求める再帰を使って、Vueのコンポネントの多角性を見つめなおしたい

前提・実現したいこと

Vueを使って、テンプレートを辿りつつ、さらに同じテンプレート(コンポネント)を辿って
再帰する、階数を求めるプログラムを作りたい。Vueの武器template:を組み合わせて
コールスタックを実現したい

発生している問題・エラーメッセージ

Vueの勉強不足か、Vueがまだまだ未熟なのか知らないが、
関数を強制的にコールスックから抜けられるReturneeが判りません。
Dom内にreturnが書ける方法がないか、思索中です。無くてもそれに
近い物があったら教えてください

該当のソースコード

JavaScript(Vue.js)
1
2<html>
3<head>
4<script src="https://unpkg.com/vue/dist/vue.js"></script>
5<script src="http://code.jquery.com/jquery.js"></script>
6</head>
7<body>
8<div id="app">
9	<recursive :i="i"  @start="pick"></recursive>
10	
11</div>
12<script>
13Vue.component('recursive',{
14	template:`<div><recursive v-if=\"$parent.$data.i>1\" :i=\"$parent.$data.i\" :one=\"one(--$parent.$data.i)\" :two=\"two\"></recursive>
15	<div :two=\"two()\" v-else>Ending</div></div>`,
16	/*Rootのiの整数値を元に、recursiveから再帰を使って、
17	returnのような関数から強制的に抜ける方法がなんなのか知りたい。
18        VueらしくDomにその方法が示せれると尚よい。*/
19	methods:{
20		one:function(a){
21			this.$data.i=a;
22			return this.$data.i*this.$parent.$data.i
23			/* かな?*/
24		},
25		two:function(){
26			this.$parent.$emit('start',1);
27			//この関数まだ作成中です。
28		}
29	},
30	props:['i']
31})
32new Vue({
33	el:"#app",
34	data:{
35		i:5
36	},
37	methods:{
38		pick:function(a){
39			var v=0
40		}
41	}
42})
43</script>
44</body>
45</html>
46