Как преобразовать Ref?

Question

[raving]

Почему-то такой вариант не вызывает ошибок typescript
файл AppSidebar.vue

<script setup lang="ts">
import ToggleSwitch from 'primevue/toggleswitch';
import {ref} from "vue";

const test = ref(false);
</script>

<template>
  <ToggleSwitch v-model="test" />
</template>

Но зато такой вариант показывает следующую ошибку у v-model: "Vue: Type Ref is not assignable to type string | boolean | undefine"

файл AppSidebar.vue

<script setup lang="ts">
import ToggleSwitch from 'primevue/toggleswitch';
import {useAppSidebar} from "../model/useAppSidebar.ts";

const appSidebar = useAppSidebar();
</script>

<template>
  <ToggleSwitch v-model="appSidebar.isOpen" />
</template>

файл useAppSidebar.ts

import { ref } from 'vue';

export const useAppSidebar = () => {
    const isOpen = ref(false);

    return {
        isOpen
    }
}

Нагуглил, что в случае если описывать ref в компоненте, то Vue автоматически разворачивает реактивные ссылки и приводит их к типу boolean. Но не нашел информации как можно сделать так же в случае с composables?
Были варианты использовать computed или вместо ref использовать reactive и применять toRefs, но выглядит как-то кривова-то. Может есть какой-то еще, более лаконичный и правильный вариант, как можно это обойти?

Answer 1

[Антон Антон]

в template оно автоматически разворачивает только первый уровень, т.е. нужно использовать что-то типа

<script setup lang="ts">
import ToggleSwitch from 'primevue/toggleswitch';
import {useAppSidebar} from "../model/useAppSidebar.ts";

const {isOpen} = useAppSidebar();
</script>

<template>
  <ToggleSwitch v-model="isOpen" />
</template>