title: vue 3 & typescript - Cannot access ComputedRef<> when it is located inside a reactive();
body: <pre><code>interface Intf {
      prop: ComputedRef&lt;string&gt;;
  }
  
  const obj = {} as Intf;
  
  console.log(obj.prop.value);
  </code></pre>
  <p>I have the above code which looks good as what I expected. I can access <code>obj.prop.value</code> and no error was thrown from typescript. However, when I put this <code>ComputedRef&lt;string&gt;</code> inside another reactive object, I cannot retrieve it back as typescript said the <code>prop</code> is in type <code>string</code> instead of <code>ComputedRef&lt;string&gt;</code>. Let see the following codes:</p>
  <pre><code>interface Intf {
      prop: ComputedRef&lt;string&gt;;
  }
  
  const re = reactive({
      obj: {} as Intf
  });
  
  console.log(re.obj.prop.value); // typescript shown error on this line, `re.obj.prop` is with type `string` instead of `ComputedRef&lt;string&gt;`. At the moment, I cannot retrieve `prop.value` by accessing `prop` as well, since prop is a `ComputedRef&lt;string&gt;` and I should get its value by accessing `prop.value`!!
  </code></pre>