How would you store a ref of an external packages in a state (useState)

I have this:

import { useChat } from '@ai-sdk/vue';
const { messages, handleSubmit } = useChat()

import { useChat } from '@ai-sdk/vue';
const { messages, handleSubmit } = useChat()

import { useChat } from '@ai-sdk/vue';
const { messages, handleSubmit } = useChat()

import { useChat } from '@ai-sdk/vue';
const { messages, handleSubmit } = useChat()

handleSubmit

handleSubmit

handleSubmit

handleSubmit is a method and

messages

messages

messages

messages is a

ref()

ref()

ref()

ref().

How can I wrap this in

useState

useState

useState

useState to be able to call

handleSubmit

handleSubmit

handleSubmit

handleSubmit and access messages from any component and keep the state alive on route change?