How to replace a string with another string (vue3 composition API)

I have strings that contain ### and I'm replacing it with another value. Now I want to use com in combined with a click event, I created the event and it works but it doesn't go back to the original value

What's the best way to do this?

<script setup>
const isOpen = ref(false)

const changeString = ref('Exibir Filtros')


function toggle() {
    isOpen.value = !isOpen.value
    changeString.value = 'Ocultar Filtros'
}


</script>

As soon as the user clicks on toggle, a dropdown appears and the value of the div should change to "Ocultar Filtros" and when the user clicks again the value of the div should return to the previous value "Exibir Filtros"

<div id="faq-accordion-2" class="accordion accordion-boxed">
                    <div class="accordion-item">
                        <div id="faq-accordion-content-5" class="accordion-header flex items-center">
                            <div class="w-50vw relative text-slate-500">
                                <input type="text" class="form-control box pr-10" id="search"
                                    placeholder="Busque por detalhes, número, nome, vencimento ou valor">
                                <Search class="w-4 h-4 absolute my-auto inset-y-0 mr-3 right-0" />
                            </div>
                            <div class="underline ml-4 text-primary font-medium cursor-pointer" @click="toggle">{{ changeString }}</div>
                        </div>
                        <div id="faq-accordion-collapse-5" class="accordion-collapse" v-show="isOpen">
                            <div class="accordion-body text-slate-600 dark:text-slate-500 leading-relaxed"> Lorem Ipsum is
                                simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                                of type and scrambled it to make a type specimen book. It has survived not only five
                                centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                            </div>
                        </div>
                    </div>
                </div>

There are two other ways you can achieve this:

1. Using tenary operation

function toggle() {
    isOpen.value = !isOpen.value
    changeString.value = isOpen.value ? 'Ocultar Filtros' : 'Exibir Filtros'
}

2. You can also use this tenary operation in computed() property where you compute changeString based on change in isOpen

const changeString = computed(() => isOpen.value ? 'Ocultar Filtros' : 'Exibir Filtros'
)

It sounds like changeString should set itself based on the value of isOpen

function toggle() {
    isOpen.value = !isOpen.value
    if (isOpen.value) {
       changeString.value = 'Ocultar Filtros'
    } else {
       changeString.value = 'Exibir Filtros'
    }
}