Issue with props, getting undefined in Vuejs?

<script>
  import {pathdata} from "../../assets/pathdata";
data() {
    return {
      pathdata: [],
    };
  },
  mounted() {
    pathdata().then((r) => {
      this.matchingData = r.data;
    });
  },
}
  </script>

<template>
  <div>
    <div v-if="matchingData.length > 0" class="line">
      <div
        v-for="match in matchingData"
        :key="match.PipelineID"
        :class="{
          green: match.OverallStatus === 'healthy',
          red: match.OverallStatus === 'down',
        }"
      >
        {{ match.OverallStatus }}
      </div>
    </div>
    <div v-else><p>No matching data</p></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(
        (a) => (a.SourceDatabaseName === this.SourceDatabaseName)
      );
    },
  },
};
</script>