vue-query composables like "uesQuery()" should only be used inside a "setup()" function or a running effect scope

Question

At a loss on what needs to be done here. Am I not using the wagmi hook properly with vue.js?

fileName: Pagename.vue

<template>
<div>
 <button type="button" @click="count++">+</button>
   <input autocomplete="off" type="text" :value="count" disabled />
  <button type="button" autocomplete="off" @click="count--">-</button>
 <button type="submit" autocomplete="off" @click="mintNew(count)">MINT</button>
</div>
</template>

<script setup>


const count = ref(0)

defineExpose({
    count
})

import { useAccount, useContractWrite, useContractRead } from 'use-wagmi'
import  json  from '~/artifacts/contracts/GenTest2.sol/GenTest2.json'


const contract = json
const config  = useRuntimeConfig()
const contractAdd = config.public.contract
const { isConnected } = useAccount()

const thePrice = () => {
    useContractRead({
      address: contractAdd,
      functionName: "T2G_PRICE",
      onSuccess(data) {
        console.log('success', data)
      }
    })
}


async function mintNew(mintCount) {
    const { data, write: T2GMint } = useContractWrite({
    address: contractAdd, 
    abi: contract.abi, 
    functionName: "T2GMint"
    });
    const ethToBeSent = thePrice() * mintCount
    if(!isConnected) {
      alert('Connect Wallet to Mint or Enter amount more than 0')
    }
    else {
      T2GMint({ args: mintCount, value: ethToBeSent})
    }
    return data
}

</script>

When the last button is clicked the browser console gives three errors in succession:

vue-query composables like "uesQuery()" should only be used inside a "setup()" function or a running effect scope.

[Vue warn]: inject() can only be used inside setup() or functional components. at

[Vue warn]: Unhandled error during execution of native event handler
at <Pagename onVnodeUnmounted=fn ref=Ref< Proxy { : Proxy, : {…} }>>

Any help is greatly appreciated.