title: How to show nested array data in vuejs component
body: <p>I'm running the following query:
  <code>$users=User::with('roles.permissions')-&gt;get()-&gt;unique();</code></p>
  
  <p>this query returns result set:</p>
  
  <pre><code>Array = [
  {
      created_at: "2019-01-11 09:27:02",
      deleted_at: null,
      email: "admin@example.com",
      email_verified_at: null,
      id: 1,
      name: "ADMIN",
      roles: [
          {id: 1, name: "Admin", slug: "Admin", description: "This is Super-Admin Role", created_at: "2019-01-11 09:27:02",
        permissions: [
         {id:1, name:"Create,slug:"Create"},
         {id:1, name:"Read",slug:"Read"},
         {id:1, name:"Delete",slug:"Delete"},
  ],
  },
  
      ],
  },
  
  ]
  </code></pre>
  
  <p>returns user details with <code>roles</code> I want to show this result set in my <code>Vue Component</code> table.</p>
  
  <p>this my <code>vue component</code> read <code>method</code></p>
  
  <pre><code>  read:function(){
          axios.get('/userlist')
          .then(response=&gt;{
              console.log(response.data);
  
          })
  
      }
  </code></pre>
  
  <p>This is my table</p>
  
  <pre><code>&lt;table class="table table-bordered"&gt;
    &lt;thead&gt;
      &lt;th&gt;no.&lt;/th&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;E-mail&lt;/th&gt;
      &lt;th&gt;Roles&lt;/th&gt;
      &lt;th&gt;Permissions&lt;/th&gt;
      &lt;th&gt;Action&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr v-for="(user,key) in users"&gt;
        &lt;td&gt;{{++key}}&lt;/td&gt;
       &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <blockquote>
    <p>How to show user,roles and permissions separately in html table.</p>
  </blockquote>