vuejs 动态加载data ,v-for 使用

初始化vue：

$.ajax({  
  url: '/test.html',
   type: 'GET',
   dataType: 'json',
   data: {id: id},
})
.done(function(dataJson) {   
  console.log(dataJson);
   var example1 = new Vue({      
      el: '#test',
      data: dataJson
   });

})
.fail(function() {   
  console.log("error");
})<br></br>

HTML代码：

<div id="test">   
<table class="table wp100">      
  <thead>         
    <tr>            
      <td>序号</td>           
      <td>名称</td>           
  </thead>      
  <tbody>      
    <tr v-for="item in $data.role">           
      <td>{item.id}</td>            
      <td>{item.name}</td> 
    </tr>
  </tbody>   
 </table>
</div><br></br>

通过 vue 输出{$data.role}的 role json:

 {   "id": "2",   "player_name": "测试未深度维护",  "role": [     {       "id": "3",       "name": "阿三也疯狂1",       "is_main": "2"     }   ] }<br></br>

但是HTML没反应？是什么问题？怎么使用 data里的 role。

我以使用过

1、<tr v-for="item in role"> 
2、<tr v-for="item in $data.role"> 
3、<tr v-for="item in data.role">
4、<tr v-for="item in $data['role']"> 
5、<tr v-for="item in data['role']"> 
<br></br>

都是不行的。。求指点。。。