JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.bootcss.com/vue/1.0.24/vue.min.js"></script>
<div id="app">
  <recursive-object :data="data"></recursive-object>
</div>

JavaScript

//递归对象
var recursiveObject = Vue.extend({
  name: 'recursive-object',
  template:[
  '<ul>',
    '<li v-for="(key,val) in data">',
    		'<div v-if="is_obj(val)">',
        '<span>{{ key }}</span>',
       '<recursive-object :data="val"></recursive-object>',
       '</div>',
       '<span v-if="!is_obj(val)">{{key}} - {{val}}</span>',
    '</li>',
  '</ul>'].join(''),
  props:{data:{}},
  methods:{
    is_obj:function(val){
      return Object.prototype.toString.call(val) === '[object Object]'
    }
  }
})
//注册个递归组件
Vue.component('recursiveObject',recursiveObject)

//go...
new Vue({
  el:'#app',
  data:function(){
    return {
      data:{
        text:'yes',
        a0:{
          test1:'vace1',
          test2:'vace2'
        },
        a1:{
          asub1:{
          asubsub1:'hello1',
          asubsub2:'hellow'
         },
        asub2:{
          asubsub1:'hello4',
          asubsub2:'hello5',
          asubsub3:{
            asubsubsub1:'world',
            asubsubsub2:{
            asubsub1:'hello4',
          	asubsub2:'hello5',
          }
        }
      }
      }
    }
  }
})