How to properly use a computed boolean?

[AndreKR]

This doesn't work:

<script setup>
  import { reactive, computed } from 'vue';

  let state = reactive({ some_toggle: false });

  let opposite_of_toggle = computed(() => { return !state.some_toggle; });

  function check() {
    alert("opposite_of_toggle is: " + (opposite_of_toggle ? "true" : "false"));
  }
</script>

<template>
  <button type="button" @click="state.some_toggle = !state.some_toggle">Toggle</button>
  <button type="button" @click="check">Check</button>
  <div v-if="state.some_toggle">Toggle is on</div>
</template>

Playground

You can toggle a toggle by clicking Toggle.

When clicking Check, it will always show "opposite_of_toggle is: true".

I would instead expect it to show "opposite_of_toggle is: false" when the toggle is on.

I'm guessing this has something to do with the computed proxy being truthy or something like that? Or I simply made a stupid typo. :)

[AndreKR]

Ah, never mind. The docs say:

and the returned value is a computed ref. Similar to normal refs, you can access the computed result as publishedBooksMessage.value.

So in the example it should be opposite_of_toggle.value.