Vue.js Data Being Deleted After Being Passed To Child Component

I have a Vue table with expandable rows. Each row represents a business. When a row is clicked/expanded then a child component “businessInfo” is rendered. The child component takes the row data from the expanded row and displays a series of buttons representing each location for the business, and another table which shows the employees for that location.

The data:

[   
{
    "businessName": "BusinessName_1",
    "locationCount": 2,
    "locations": [
        {
            "locationId": 1,
            "locationName": "location_1",
            "employees": [
                {
                    "employeeId": 694,
                    "employeeName": "employeeName694"
                }
            ]
        },
        {
            "locationId": 2,
            "locationName": "location_2",
            "employees": [
                {
                    "employeeId": 697,
                    "employeeName": "employeeName697"
                }
            ]
        }
    ]
},
{
    "businessName": "BusinessName_2",
    "locationCount": 2,
    "locations": [
        {
            "locationId": 5,
            "locationName": "location_5",
            "employees": [
                {
                    "employeeId": 547,
                    "employeeName": "employeeName547"
                }
            ]
        },
        {
            "locationId": 6,
            "locationName": "location_6",
            "employees": [
                {
                    "employeeId": 613,
                    "employeeName": "employeeName613"
                }
            ]
        }
    ]
}
]

Parent component:

<template slot="subContent">
 <div class="sub-flex">
  <el-scrollbar class="table-scroll">
   <el-table
    :data="list"
    :row-key="row => row.businessName"
   >
    <el-table-column type="expand">
      <businessInfo
        :key="row.businessName"
        slot-scope="{row}"
        :data-view="row.locations"
        :business-name-prop="row.businessName"
      />
    </el-table-column>
    <el-table-column label="Name" prop="id">
      <template slot-scope="{row}">
        <span class="link-type">{{ row.businessName }}</span>
      </template>
    </el-table-column>
  </el-table>
</el-scrollbar>

Child component:

<template>
  <span v-for="s in dataView" :key="s.locationId" name="locations" span="10">
    <el-button round :type="markButtonAsPrimary(s.locationId)" span="1" class="siteButton" @click="activatelocationButton(s.locationId)">{{ s.locationName }}</el-button>
  </span>
</div>
<div>
  <el-table
    :data="displayList"
    :row-key="row => row.employeeId"
  >
    <el-table-column label="EmployeeName" prop="name">
      <template slot-scope="{row}">
        <span>{{ row.employeeName }}</span>
      </template>
    </el-table-column>
    <el-table-column>
      <span>Get Details</span>
    </el-table-column>
  </el-table>
</template>
<script>
 export default {
 name: 'businessInfo',
 props: {
  dataView: {
  type: Array,
  required: true
  },
  businessNameProp: {
   type: String,
   required: true
  }
 },
 data() {
  return {
   allData: [],
   displayList: [],
   currentSiteElement: 99999999
  }
},
created() {
 this.displayList= this.dataView
}

When a row is expanded, and the childComponent is rendered, it looks correct. There is a button for each location, and the table shows the employees in a table for the first location in the locations array (By default).

However, if I examine the data “dataView” passed in to the child component, the employees array for each location is empty, even in the created() section when the child component was first rendered. Therefore any attempts to show employees for other locations within the child component will instead display “No Data”.

This leads me to believe that maybe the way I am passing data to the child component is incorrect?