How to use Vue components

Dear Forum members,

I hope you can help my with the following question. I tried to make everything organised but i have some issues. One of my issues is when i have a component for example a hamburger menu. I create a new component with the following code:

<template>
  <q-btn flat @click="drawer = !drawer" round dense icon="menu" />
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    return {
      drawer: ref(true),
    };
  },
};
</script>

When i add this component to my template the function is not working anymore. Only if i put the '

<q-btn flat @click="drawer = !drawer" round dense icon="menu" />

and

return {
drawer: ref(true),
};

directly in my template it works. Can someone tell my what i doing wrong?