Fetch API working in options API but not in compositions API

Question

I have some code that I want to convert from options API to composition API and in composition API I'm getting res.json is not a function error while the same code is working fine in options API.

Here's the code for options API

<script>

export default {
  name: 'ProductComponent',
  data(){
    return {
      productData: []
    }
  }
  methods: {
    async retrievedData(){
      const res = await fetch('../productsInfo.json');
      const resData = await res.json()
      this.productData = resData
    }
  }
}
</script>

Here's the code for composition API

<script>
import { ref } from 'vue'

export default {
  name: 'ProductComponent',
setup() {
  const  productData =ref([])
  const retrievedData = async() => {
    const res = await fetch('../productsInfo.json');
    const resData = await res.json()
    productData.value = await resData
  }
}
</script>

Not using return for productData and retrievedData in setup method because this data is not being exposed.