title: How to set reactive object in Vuejs 3
body: <p>I have a reactive object in the global space:</p>
  <pre><code>let cart = Vue.reactive({
      order: {
         itemsCount: 0
      },
      items: []
  });
  </code></pre>
  <p>It works great. When we change this cart in any way (for example <code>cart.order.itemsCount += 1;</code>) other UI parts get updated automatically.</p>
  <p>But if we set it to a new object (let's say we have received a new <code>order</code> object from server) then it breaks and won't work anymore:</p>
  <pre><code>cart = serverCart
  </code></pre>
  <p>We even tried <code>cart = Vue.reactive(serverCart)</code> and it still does not cause other UI parts to re-render.</p>
  <p>It's possible that we set every property manaully:</p>
  <pre><code>cart.order.itemsCount = serverCart.order.ItemsCount;
  cart.items[0].productTitle = serverCart.order[0].productTitle;
  ...
  </code></pre>
  <p>But this is idiotic of course.</p>
  <p>How can we re-set a reactive object entirely in Vue.js 3?</p>
  <p><strong>Update</strong>:</p>
  <p>You can see this <a href="https://codesandbox.io/s/zen-flower-orz832?file=/index.html" rel="nofollow noreferrer">codesandbox</a> in action.</p>