[Vuejs]-How to use a vue-concurrency Task Creator that accepts an argument?

Ok so this was fixed by passing in refs and checking for undefined inside the Task generator, like so:

/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-return */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import { Ref } from 'vue';
import { timeout, useTask } from 'vue-concurrency';

export const useReturnTextTask = (text: Ref<string | undefined>) => {
  return useTask(function* () {
    if (text.value) {
      console.log('inside Task', text);
      yield timeout(1000);
      return text;
    } else {
      throw new Error('Text required.');
    }
  });
};

And moving the useReturnTextTask() to the top level like so:

<template>
  <input v-model="textInput" type="text" />
  <button @click="handleClick">Click to Perform Task</button>
  <div v-if="returnTextTask.last?.isError">
    {{ returnTextTask.last?.error.message }}
  </div>
  <div v-else>
    {{ returnTextTask.last?.value }}
  </div>
</template>

<script setup lang="ts">
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-call */
import { useReturnTextTask } from 'src/composables/test';
import { ref } from 'vue';

const textInput = ref<string>();

const returnTextTask = useReturnTextTask(textInput);

const handleClick = async () => {
  const returnTextInstance = returnTextTask.perform();
  await returnTextInstance;
  if (returnTextTask.last?.isSuccessful) {
    console.log('returnTextTask.last?.value', returnTextTask.last?.value);
    console.log('returnTextInstance.value', returnTextInstance.value);
  }
};
</script>