title: How to set the value of a reactive object (ref) with a value from another reactive object (ref)?
body: <p>I am trying to set the value of a <code>Form</code> based on a data in another reactive variable called <code>Product</code> but it does not seem to work. The <code>Form</code> should set its values to the <code>Product</code> data if it is available, and if not then just use <code>null</code>.</p>
  <p>This is a section of the vue component code:</p>
  <pre><code>props: {
      ProductID: {
        type: Number,
        default: null
      }
    },
  
  setup (props) {
  const Product = ref();
  
  async function loadProduct(ProductID) { // Runs when `props.ProductID` changes using a watcher
        try {
          const Response = await $axios.get(`/api/product/${ProductID}`);
          Product.value = Response.data; // This is an array of data
        } catch (error) {
          console.log(error);
        }
      }
  }
  
  
   const Form = ref({
        ProductTitle: Array.isArray(Product.value) &amp;&amp; Product.value[0].producttitle ? Product.value[0].producttitle : null,
   ProductText: Array.isArray(Product.value) &amp;&amp; Product.value[0].producttext ? Product.value[0].producttext : null,
      )}
  }
  </code></pre>
  <p>In vue devtools I can see that <code>Product</code> is populated with data, but the values are never assigned to the <code>Form</code> keys - they are just null. If <code>Product</code> is reactive and so too is <code>Form</code>, why does this not work?</p>