title: Vue3: changing a normal object causes rerender
body: <p>In the following code <code>state</code> is just a normal object but changing its prop: <code>message</code> (again, just a normal prop) causes a rerender. Why?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const App = {
    setup() {
      const name = Vue.ref("");
  
      Vue.watch(name, () =&gt; state.message = `Hello ${name.value}`);
  
      const state = {
        name,
        message: "Welcome stranger"
      };
      return state;
    }
  };
  
  Vue.createApp(App).mount("#root");</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue@next"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;
    name: &lt;input v-model="name" /&gt; &lt;br/&gt; message: {{ message }}
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>