title: Vue typescript ref: Cannot create property 'value' on boolean 'false'
body: <p>I'm using vue with typescript and headless ui. When I try to show a dialog following this example: <a href="https://headlessui.dev/vue/dialog" rel="nofollow noreferrer">https://headlessui.dev/vue/dialog</a>, I get the error: Type 'true' is not assignable to type 'Ref'</p>
  <p>I declare the isOpen variable in my component class:</p>
  <pre><code>private readonly isOpen = ref&lt;boolean&gt;(false);
  </code></pre>
  <p>The html for the button that is opening the dialog is:</p>
  <pre><code>&lt;button class=&quot;btn&quot; @click=&quot;toggleGuestList(true)&quot;&gt;View list&lt;/button&gt;
  </code></pre>
  <p>The method for toggling the dialog is:</p>
  <pre><code>public toggleGuestList(toggle:boolean) {
     this.isOpen.value =  toggle;
  }
  </code></pre>
  <p>It is when this method is activated I get the error:</p>
  <blockquote>
  <p>Cannot create property 'value' on boolean 'false'</p>
  </blockquote>
  <p>It seems isOpen is resolved as a plain boolean. How can I force it to see it as a ref? I tried (this.isOpen as Ref&lt; boolean &gt;).value = true, but it did not solve the issue.</p>