I have created a simple “more-less text” component, which is based on the Tailwind hidden class and the bound more variable. The code is below:

<!--  More.vue -->
<template>
  <section :class="{ hidden: more }">
    <slot /><!-- long content will be inside -->
    <p class="cursor-pointer" @click="toggle"> less </p>
  </section>
  <p :class="{ hidden: !more }" class="cursor-pointer" @click="toggle"> more </p>
</template>

<script setup>
let more = ref(true);

function toggle() {
    more = !more;
    console.log(more); // true, false - as expected
}
</script>

This component is used elsewhere as follows:

<template>
    Always visible content.
    <More>Some long content with toggled visibility.</More>
</template>

I see a correct console output then testing. But the rest “more” content part does not appear. What’s wrong?