У меня проблема в Element-ui, когда я хочу использовать V-for в el-column-table

Question

Привет У меня есть проблема в Element-UI Когда я хочу использовать V-для В el-column-table я использую Axios и заполнить массив (список), а затем я использую этот массив для данных El-таблицы все вещи хорошо, но один из массива Элемент - это массив (роли), когда я пытаюсь показать содержимое этого массива, используя v-for, у меня есть проблема и я получаю сообщение об ошибке или не показываю ничего, что это мой код

<template>
<div class="container">
    <div class="row justify-content-center mt-4">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">{{trans('user.cardTitle')}}</h3>
            <!-- /.card-tools -->
                <div class="card-tools">
                    <el-button type="success"
                    size="mini"
                    @click="createUser">{{trans('app.addBtnLbl')}} <i class="fas fa-plus fa-fw"></i></el-button>
                    <el-button type="primary"
                    size="mini"
                    @click="activeUser">{{trans('app.activeBtnLbl')}} <i class="fa fa-lightbulb"></i></el-button>
                </div>                
            </div>
          <!-- /.card-header -->
          <div class="card-body table-responsive p-0">
            <el-table
                :data="list.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase())|| data.email.toLowerCase().includes(search.toLowerCase()))"
                :default-sort = "{prop: 'username', order: 'descending'}"
                style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                  :label="trans('user.username')"
                  sortable
                  prop="username">
                </el-table-column>
                <el-table-column
                  :label="trans('user.email')"
                  sortable
                  prop="email">
                </el-table-column>
                <el-table-column
                  :label="trans('user.profileName')"
                  sortable
                  prop="profile_name">
                </el-table-column>
                <el-table-column :label="trans('user.roles')" sortable                     
                >
                <el-table-column v-for="(item,index) of list.roles" 
                :prop="item[index].name" 
                :label="item[index].description"
                :key="index">
                </el-table-column>                   
                </el-table-column>
                <el-table-column
                    prop="active"
                    :label="trans('user.status')"
                    width="100"
                    :filters="[{ text: 'فعال', value: '1' }, { text: 'غیرفعال', value: '0' }]"
                    :filter-method="filterActive"
                    filter-placement="bottom-end">
                    <template slot-scope="scope">
                        <el-tag
                        :type="scope.row.active === '1' ? 'success' : 'danger'"
                        disable-transitions><span v-if="scope.row.active=='1'">فعال</span><span v-else>غیرفعال</span></el-tag>
                    </template>
                </el-table-column>
                <el-table-column class="float-left"
                  align="right">
                  <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      :placeholder="trans('app.searchPlaceholder')"/>
                    <el-input name="id" type="hidden" v-model.number="form.id" autocomplete="off"></el-input>
                  </template>
                  <template slot-scope="scope" class="float-left">
                    <el-button
                    size="mini"
                    @click="editUser(scope.row)">{{trans('app.editBtnLbl')}} <i class="fa fa-edit blue"></i></el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="deleteUser(scope.row)">{{trans('app.deleteBtnLbl')}} <i class="fa fa-trash red"></i></el-button>                        
                  </template>                    
                </el-table-column>
                <infinite-loading
                slot="append"
                @infinite="infiniteHandler"
                force-use-infinite-wrapper=".el-table__body-wrapper">
                <div slot="no-more"></div>
                </infinite-loading>
              </el-table>
             <p id="demo"> {{selectedRole()}}</p>

              <div class="block">
                   <!-- <el-pagination
                        background
                        layout="prev, pager, next"
                        prev-text="<"
                        next-text=">"
                        :page-size="1"
                        :total="10"
                        :data="tableData">
                    </el-pagination>-->              
              </div>
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
    </div>
</div>

<script>
  export default 
  {
    data(){
        return{
            warningAlert : trans('app.warningAlert'),
            cancelAlert : trans('app.cancelAlert'),
            noticTxt : trans('app.noticTxt'),
            cancelButtonText : trans('app.cancelButtonText'),
            confirmButtonText : trans('app.confirmButtonText'),
            form: {
                id: '',
                active:'',
                username: '',
                email: '',
                profile_name: '',
                profileId:'',                    
            },
            items: [],             
            tableData:[],
            search: '',
            page: 1,
            list: [],
            newsType: 'story',
            infiniteId: +new Date(),
            multipleSelection:[],
        }
        },
        methods :{


        infiniteHandler($state) {
            axios.get("../api/profile/users", {
                params: {
                page: this.page,
                },
            }).then(({ data }) => {
                    if (data.data.length) {
                    this.page += 1;
                    this.list.unshift(...data.data.reverse());
                    $state.loaded();
                } else {
                    $state.complete();
                }
            });
        }