title: Type 'true' is not assignable to type 'Ref<boolean>'
body: <p>I have the following code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!-- App.vue --&gt;
  &lt;template&gt;
      &lt;button @click=&quot;login&quot;&gt;Login&lt;/button&gt;
  &lt;/template&gt;
  &lt;script lang=&quot;ts&quot;&gt;
  import { loggedIn } from '../state'
  import { defineComponent } from 'vue'
  
  export default defineComponent({
      data() {
          return {
              loggedIn,
          }
      },
      methods: {
          login() {
              this.loggedIn = true
          }
      }
  })
  &lt;/script&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// state.ts
  import { reactive, ref } from 'vue'
  
  export const loggedIn = ref(true)
  </code></pre>
  <p>The code above has a compilation error (which shows both in VS Code and from <code>vue-cli-service serve</code>)</p>
  <pre><code>TS2322: Type 'true' is not assignable to type 'Ref&lt;boolean&gt;'.
  
    &gt;  |             this.loggedIn = true
  </code></pre>
  <p>I'm pretty sure that's how I'm supposed to do it, so I'm not sure why I'm getting an error. I can change the code to this and the error goes away: <code>this.loggedIn.value = true</code> But I'm pretty sure that's not how its supposed to work, and I get this runtime error:</p>
  <pre><code>Cannot create property 'value' on boolean 'false'
  </code></pre>
  <p>Why am I getting this compilation error in my original code?</p>