Issue with vue slots, when trying to display data from api call in Vuejs?

<template>
  <div>
    <div v-for="box in boxes" :key="box.SourceDatabaseName">
      <BaseAccordian>
        <template v-slot:title>{{ box.SourceDatabaseName }}</template>
        <template v-slot:content>
          <div
            v-for="paint in paints"
            :key="paint.TargetDatabaseName"
            class="line"
          >
            <List
              :data="matchingdata"
              :SourceDatabaseName="box.SourceDatabaseName"
            />
          </div>
        </template>
      </BaseAccordian>
    </div>
  </div>
</template> 

<script>
import { boxcontent } from "../assets/boxcontent";
import { paintcontent } from "../assets/paintcontent";
import { matchingcontent } from "../assets/matchingcontent";
import BaseAccordian from "./BaseAccordian.vue";
import List from "./List.vue";
export default {
  name: "HelloWorld",
  components: {
    BaseAccordian,
    List,
  },
  data() {
    return {
      boxes: [],
      paints: [],
      matchingdata: [],
    };
  },
  mounted() {
    boxcontent().then((r) => {
      this.loading = true;
      this.boxes = r.data;
    });
    paintcontent().then((r) => {
      this.loading = true;
      this.paints = r.data;
    });
    matchingcontent().then((r) => {
      this.loading = true;
      this.matchingdata = r.data;
    });
  },
};
</script>

<template>
  <div class="">
    <div
      v-for="match in matchingData"
      :key="match.PipelineID"
      :class="{
        green: match.OverallStatus === 'healthy',
        red: match.OverallStatus === 'down',
      }"
    >
      {{ match.OverallStatus }}
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    data: {
      type: Array,
      required: true,
    },
    SourceDatabaseName: {
      type: String,
      required: true,
    },
  },
  data: function () {
    return {};
  },
  methods: {},
  computed: {
    matchingData() {
      return this.data.filter(
        (item) => item.PipelineID === this.SourceDatabaseName
      );
    },
  },
};
</script>
<style scoped>
</style>