title: How to watch ref and reactive object with a single watcher in Vue3
body: <p>Vue v3 <a href="https://v3.vuejs.org/api/computed-watch-api.html#watching-multiple-sources" rel="nofollow noreferrer">docs</a> shows an example of watching multiple refs with a single watcher by passing an array as an argument</p>
  <p>Can I (and how) use similar approach to watch <code>ref</code> and <code>reactive</code> object at the same time with a single watcher ?</p>
  <pre class="lang-js prettyprint-override"><code>const state = reactive({
    postPerPage: 10,
    currentPage: 1,
  });
  
  const posts = ref([]);
  
  const currentPosts = ref([]);
  
  watch(
    () =&gt; posts.value, // store value in currentPosts when the posts.value is updated (get data from api)
    () =&gt; {
      currentPosts.value = getCurrentPost(); 
    }
  )
  
  watch(
   () =&gt; {
    return { ...state };
   }
   () =&gt; {
    currentPosts.value = getCurrentPost();
   }
  )
  </code></pre>