[Dúvida] Como trazer para a composition api

A dúvida principal é como fazer a referencia ( ref() ) ao objeto ITarefa, e de tipo booleano

<template>

      <div class="column is-three-quarter conteudo">

        <FormularioVue @aoSalvarTarefa="salvarTarefa"/>

        <div class="lista">

          <Tarefa v-for="tarefa in tarefas" :key="tarefa.id" :tarefa="tarefa" @aoClicar="selecionarTarefa"/>

          <Box v-if="listaEstaVazia()">
            Você não está produtivo hoje :(
          </Box>

          <div class="modal" :class="{'is-active': tarefaSelecionada}" v-if="tarefaSelecionada">
            <div class="modal-background"></div>
            <div class="modal-card">
              <header class="modal-card-head">
                <p class="modal-card-title">Editar Tarefa </p>
                <button class="delete" aria-label="close" @click="fechar()"></button>
              </header>
              <section class="modal-card-body">
                <div class="field">
                  <label for="descricaoDaTarefa" class="label">Descrição da Tarefa</label>
                  <input type="text" class="input" id="descricaoDaTarefa" v-model="tarefaSelecionada.descricao" >
                </div>              
              </section>
              <footer class="modal-card-foot">
                <button class="button is-success" @click="editaTarefa">Salvar</button>
                <button class="button" @click="fechar()">Cancelar</button>
              </footer>
            </div>
          </div>
        </div>

      </div>

</template>

<script lang="ts">
import {computed, defineComponent } from 'vue';
import FormularioVue from '../components/Formulario.vue';
import Tarefa from '../components/Tarefa.vue';
import Box from '../components/Box.vue';
import ITarefa from '../interfaces/ITarefa';
import { useStore } from '@/store';
import {ALTERAR_TAREFA, CADASTRAR_TAREFA, OBTER_PROJETOS } from '@/store/tipo-acoes'
// import { notificacaoMixin } from '@/mixins/notificar';
import { TipoNotificacao } from '@/interfaces/INotificacao';
import useNotificador from '@/hooks/notificador';
import { OBTER_TAREFAS } from '@/store/tipo-acoes';

export default defineComponent({
  name: 'Tarefas',
  components: {
    FormularioVue,
    Tarefa,
    Box
  },
  //estado do componente que retorna um objeto
  data () {
    return{
      modoEscuroAtivo: false,
      tarefaSelecionada: null as ITarefa | null
    }
  },
  // mixins: [notificacaoMixin],
  methods:{
    salvarTarefa (tarefa: ITarefa){
      this.notificar('Tarefa Finalizada','Tarefa completada com sucesso', TipoNotificacao.SUCESSO)
      this.store.dispatch(CADASTRAR_TAREFA, tarefa);

    },
    trocarTema(modoEscuroAtivo: boolean){
      this.modoEscuroAtivo = modoEscuroAtivo;
    },
    listaEstaVazia(): boolean{
      return this.store.state.tarefa.tarefas.length == 0
    },
    selecionarTarefa(tarefa:ITarefa){
      this.tarefaSelecionada = tarefa;
    },
    fechar(){
      this.tarefaSelecionada = null;
    },
    editaTarefa(){
      this.store.dispatch(ALTERAR_TAREFA, this.tarefaSelecionada);
      this.fechar()

    }
  },

  setup (){
    const store = useStore();
    store.dispatch(OBTER_TAREFAS);
    store.dispatch(OBTER_PROJETOS);


    const {notificar} = useNotificador()
    return{
      tarefas: computed(() => store.state.tarefa.tarefas),
      notificar,
      store
    }
  }
});
</script>