Prop is usable in template but not in script

I’m a little confused as I’ve got a prop called filterData with an array being sent from the parent app to a child app, and it both shows in the Vue inspector with the populated array:

and it also works fine populating the page with products when I run it as a v-for loop in the child component:

<div v-for="(product, index) in filterData" :key="index">

However I can’t access it in the childs <script> area to create a new function from the data. Even just trying to console.log(filterData) gives error 'filterData' is not defined.

Here’s how I’ve got it setup:

PARENT

import productData from './assets/products.json'

export default {
  name: 'App',
  data(){
    return{
      productData: productData
    }
  },
}

<template>
  <ChildComponent 
      :productsData="productData" 
      :filterData="productData.products"
    />
</template>

CHILD COMPONENT

<template>
  <div v-for="(product, index) in filterData" :key="index"> // loops fine
    <div class='productName'>{{product.title}}</div>                    
  </div>
</template>

<script>
  console.log(filterData) // throws error

  export default {
    name: 'ChildComponent',
    props: {
        productsData: {
            type: Array,
            required: true
        },
        filterData: {
            type: Array,
            required: true
        }
    }
};
</script>

I’ve tried looking through other questions like this one but they usually discuss what I’ve already got working, any help on how I get this working?